/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.linkStyle{
	color:var(--color1);
}
.linkStyle:hover{
	color:var(--color1);
	opacity: 0.7;
	transition: all 0.5s;
}
#wrap{
    position: relative;
}
.main_wrap{
    background-image: linear-gradient(rgba(230,247,255,0.6) 1.6px, transparent 1.6px), linear-gradient(to right, rgba(230,247,255,0.6) 1.6px, #ffffff 1.6px);
    background-size: 32px 32px;
}
header.clone-nav {
    z-index: 10;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.f_logo .logo {
    width: 70% !important;
}

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_h .grid_container .grid_item{
    opacity: 0;
    transition: opacity 2s;
    transition-delay: 1.5s;
}
#main_h .grid_container .grid_item.fadeUp {
    opacity: 1;
}
#main_h .grid_container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    height: 100vh;
    min-height: 800px;
}
#main_h .grid_box1 { grid-area: 1 / 1 / 6 / 4; }
#main_h .grid_box2 { grid-area: 5 / 5 / 9 / 8; }
#main_h .grid_box3 { grid-area: 6 / 1 / 9 / 3; }
#main_h .grid_box4 { grid-area: 1 / 6 / 5 / 8; }
#main_h .grid_box5 { grid-area: 4 / 3 / 8 / 5;z-index:2; }

#main_h .top_catch {
    top: 2%;
    left: 56%;
    width: 40%;
    max-width: 600px;
    z-index: 3;
    transform: translate(-50%, 0%) scale(1.1);
    opacity: 0;
    filter: blur(5px);
    transition: 2s;
    transition-property: transform, opacity, filter;
    transition-delay: 3.5s;
}
#main_h .top_catch.active {
    transform: translate(-50%,0%);
    opacity: 1;
    filter: none;
}

/** tablet 780 **/
@media screen and (max-width: 768px){
#main_h .grid_container {
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    height: 100vw;
    min-height: inherit;
}
#main_h .grid_box1 { grid-area: 1 / 1 / 6 / 4; }
#main_h .grid_box2 { grid-area: 5 / 5 / 9 / 8; }
#main_h .grid_box3 { grid-area: 6 / 1 / 9 / 5; }
#main_h .grid_box4 { grid-area: 1 / 4 / 3 / 8; }
#main_h .grid_box5 { grid-area: 4 / 2 / 7 / 5; }

#main_h .top_catch{
    top: 24%;
    left: 70%;
    width: 48%;
}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#main_h .grid_container {
    height: 150vw;
}
#main_h .grid_box3 { grid-area: 7 / 1 / 9 / 5; }
#main_h .top_catch {
    top: 24%;
    left: auto;
    right: 5px;
    transform: translate(0%, 0%) scale(1.1);
    width: 61%;
}
#main_h .top_catch.active {
    transform: translate(0%, 0%);
}

}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.t_banner_box .banner {
    box-shadow: 7px 7px 0px rgba(125,205,244,0.5);
}
#question .txt {
    width: 100%;
    margin-right: 0;
}
.con_box{
    position: relative;
}
.con_box.con1::before, .con_box.con2::before, .con_box.con3::before {
    content: "";
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
    position: absolute;
    z-index: 3;
}
.con_box.con1::before {
    background-image: url('/Files/img/point1.png');
    background-position: top right;
    width: 110px;
    top: 10%;
    right: 2%;
}
.con_box.con2::before {
    background-image: url('/Files/img/point2.png');
    background-position: bottom left;
    width: 100px;
    bottom: -6%;
    left: -3%;
}
.con_box.con3::before {
    background-image: url('/Files/img/point3.png');
    background-position: bottom right;
    width: 125px;
    bottom: -15%;
    right: -3%;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.con_box.con1::before {
    width: 100px;
    top: -4%;
    right: 2%;
}
.con_box.con2::before {
    width: 90px;
    bottom: -5%;
    left: -3%;
}
.con_box.con3::before {
    width: 105px;
    bottom: -7%;
    right: -3%;
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#question .title .title_dec {
    line-height: 1.5;
}
.con_box.con1::before {
    width: 70px;
}
.con_box.con2::before {
    width: 70px;
    bottom: -3%;
}
.con_box.con3::before {
    width: 80px;
    bottom: -5%;
    right: -2%;
}

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#page_title {
    background-position: bottom;
}

.qa_type3 .con_no{
	left: 20px;
	top: 15px;
}
.qa_type3 .cate_box .box_title1, .qa_type3 .cate_box .box_txt1{
	min-height: 1.5em;
}
.qa_type3 .box_q{
	background-image: url(../img/icon_q.png);
	background-repeat: no-repeat;
	background-position: top 2px left;
	background-size: 60px;
	padding-left: 90px;
}
.qa_type3 .box_a{
	background-image: url(../img/icon_a.png);
	background-repeat: no-repeat;
	background-position: top 2px right;
	background-size: 60px;
	padding-right: 90px;
}
.qa_type3 .box_q .box_title1::before, .qa_type3 .box_a .box_txt1::before{
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(0, 0, 0, 0);
}
.qa_type3 .box_q .box_title1::before{
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 10px;
    border-right-width: 15px;
    margin-top: -10px;
    border-right-color: var(--color3);
    right: 100%;
    top: 34px;
}
.qa_type3 .box_a .box_txt1::before{
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 15px;
    border-right-width: 10px;
    margin-top: -10px;
    border-left-color: var(--color4);
    left: 100%;
    top: 35px;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.qa_type3 .box_q{
	padding-right: 0;
}
.qa_type3 .box_a{
	padding-left: 0;
}
.qa_type3 .con_no{
    top: 13px;
}
.contact_btn_wrap .icon {
    left: 1em !important;
}
.contact_btn span {
    padding: 1em 1em 1em 2em !important;
}

}