@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/fontawesome/css/all.min.css);
@import url(../libs/aos/aos.css);
/* @import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css); */
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
 index
==============================*/


@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/fontawesome/css/all.min.css);
@import url(../libs/aos/aos.css);
@import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css);
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
 index
==============================*/

.column_layout { display: flex; flex-direction: column; gap: 6rem; }
.para_bg { width: 100%; aspect-ratio: 192 / 30; background-repeat: no-repeat; background-size: cover; }
@supports (animation-timeline: scroll()) {
  .para_bg {
		background-attachment: scroll;
    animation-name: bg-pan;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
  }
  @keyframes bg-pan {
		from { background-position: center bottom; }
		to   { background-position: center top; }
	}
}
@media screen and (max-width:480px) { /* s */
	.column_layout { gap: 4rem; }
	.para_bg { aspect-ratio: 192 / 60; }
}

/* mv ----------*/
#mv { width: 100%; overflow: hidden; padding: 10rem 0 0 8rem; background-repeat: no-repeat; background-position: center top; background-size: cover; background-attachment: fixed; }
#mv .w { display: flex; max-width: 170rem; margin: auto; margin: auto; margin-bottom: -4rem; align-items: center; gap: 6rem; }
#mv .txw { max-width: 53rem; padding: 4rem 0 8rem; }
#mv .txw h1 { color: #FFF; font-size: 4rem; line-height: 1.2; }
#mv .txw h1 strong { color: #0C6448; font-size: 8.8rem; }
#mv .txw h2 { margin-top: 4rem; color: #FFF; font-size: 3rem; }
#mv .txw p { margin-top: 2rem; color: #FFF; font-size: 1.8rem; }
#mv .txw .btw { margin-top: 4rem; display: inline-flex; flex-direction: column; gap: 1rem; }
#mv .txw .btw .bt {}
#mv .imgs { position: relative; }
#mv .imgs img { width: calc(100% + 4.5rem); max-width: none; }
#mv .imgs .abs { position: absolute; top: 0; left: 0; }
@media screen and (max-width:1260px) {
	#mv .w { gap: 2%; }
	#mv .txw { width: 48%; }
	#mv .imgs { width: 50%; }
	#mv .txw h1 { font-size: 3.15vw; }
	#mv .txw h1 strong { font-size: 7vw; }
	#mv .txw h2 { margin-top: 4vw; font-size: 2.4vw; }
	#mv .txw p { margin-top: 2vw; font-size: 1.4vw; }
	#mv .txw .btw { margin-top: 4vw; }
}
@media screen and (max-width:896px) {
	#mv { padding: 6rem 0 0 2rem; }
}
@media screen and (max-width:480px) { /* s */
	#mv { padding: 8rem 0 0 0; background-attachment: scroll;  }
	#mv .w { flex-direction: column; margin-bottom: 0; gap: 0; }
	#mv .txw { width: 90%; margin: auto; padding: 0; }
	#mv .txw h1 { font-size: 6vw; }
	#mv .txw h1 strong { font-size: 16vw; }
	#mv .txw h2 { font-size: 5vw; }
	#mv .txw p { font-size: 3vw; }
	#mv .txw .btw { text-align: center; }
	#mv .txw .btw .sp { display: none; }
	#mv .imgs { width: 100%; }
}

/* index ----------*/
#index { background-color: #FFF; }
#index .index_list { display: flex; flex-flow: wrap; align-items: center; justify-content: center; }
#index .index_list li { width: 20%; }
#index .index_list li a { position: relative; display: flex; flex-flow: column; padding: 2rem 0.5rem; color: #333; text-decoration: none; align-items: center; }
#index .index_list li a::after { content: ""; position: absolute; top: 2rem; right: 0; width: 1px; height: calc(100% - 4rem); border-right: dashed 1px rgba(0, 0, 0, 0.15); }
#index .index_list li:last-child a::after { display: none; }
#index .index_list li a small { padding-top: 1rem; font-size: 1.6rem; text-align: center; }
#index .index_list li a strong { font-size: 1.8rem; text-align: center; }
#index .index_list li a svg { width: 1.4rem; aspect-ratio: 14 / 16; margin-top: 1rem; opacity: 0.2; fill: #333; }
@media screen and (max-width:896px) { /* m */
	#index .index_list li { width: 33.33%; }
	#index .index_list li a::after { top: 1rem; height: calc(100% - 2rem); }
	#index .index_list li:nth-child(1) a, #index .index_list li:nth-child(2) a, #index .index_list li:nth-child(3) a { padding: 1rem 0.5rem 0.5rem; }
	#index .index_list li:nth-child(4) a, #index .index_list li:nth-child(5) a { padding: 0.5rem 0.5rem 1rem; }
	#index .index_list li:nth-child(3) a::after { display: none; }
	#index .index_list li a small { padding-top: 0; font-size: 1.4rem; line-height: 1.2; }
	#index .index_list li a strong { font-size: 1.6rem; }
	#index .index_list li a svg { width: 1.2rem; margin-top: 0; }
}
@media screen and (max-width:480px) { /* s */
	#index .inner { padding: 0; }
	#index .index_list li { width: 100%; border-bottom: solid 1px rgba(0,0,0,0.1); }
	#index .index_list li a { display: flex; flex-flow: row; padding: 1rem 2rem !important; }
	#index .index_list li a::after { display: none; }
	#index .index_list li a svg { margin-left: auto; }
}

/* trouble ----------*/
#trouble { position: relative; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 1) 30%); overflow: hidden; }
#trouble .inner { position: relative; z-index: 2; }
#trouble h3 { font-size: 4rem; text-align: center; }
#trouble h3 span { display: inline-block; }
#trouble h3 strong { display: inline-block; margin-top: 3rem; font-size: 5rem; }
#trouble h3 strong.fx { display: flex; align-items: center; gap: 2rem; justify-content: center; }
#trouble .trouble_list {}
#trouble .trouble_list li { border-radius: 1rem; background-color: #F0F0F0; }
#trouble .trouble_list li h4 { padding: 1rem 2rem 2rem; color: #365672; font-size: 2rem; text-align: center; }
#trouble .bgw { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#trouble .bg { position: absolute; z-index: 1; opacity: 0.3; }
#trouble .bg1 { top: 20rem; left: -45rem; transform: rotate(-30deg); transform-origin: left top; }
#trouble .bg2 { top: 30rem; right: -40rem; transform: rotate(15deg); transform-origin: right top; }
@media screen and (max-width:1260px) { /* x */
	#trouble .bg1 { width: 77vw; top: 16%; left: -36%; }
	#trouble .bg2 { width: 58vw; top: 24%; right: -32%; }
}
@media screen and (max-width:480px) { /* s */
	#trouble h3 { font-size: 6vw; }
	#trouble h3 strong { font-size: 8vw; }
	#trouble h3 strong.fx { gap: 0.5rem; }
}

/* resolution ----------*/
#resolution { 
	background-image: url(../img/index/resolution_bg_02.svg), url(../img/index/resolution_bg_01.jpg);
	background-repeat: no-repeat;
	background-position: center top -1px, center;
	background-size: 192rem auto, cover;
	background-attachment: scroll, fixed;
}
#resolution h3 { padding-top: 6rem; color: #FFF; font-size: 4.5rem; text-align: center; }
#resolution h3 strong { color: #FFF600; }
#resolution .resolution_list { max-width: 126rem; margin: auto; }
#resolution .resolution_list li { text-align: center; }
#resolution .resolution_list li img { width: 100%; max-width: 30rem; border: solid 1rem #FFF; border-radius: 100%; background-color: #A3E2CE; }
#resolution .resolution_list li h4 { padding: 1rem 2rem 2rem; color: #FFF; font-size: 2.4rem; text-align: center; }
@media screen and (max-width:480px) { /* s */
	#resolution { background-attachment: scroll, scroll; }
	#resolution h3 { font-size: 8vw; }
	#resolution .resolution_list li h4 { padding: 1rem 1rem 2rem; font-size: 1.8rem; }
}

/* case ----------*/
#case {}
#case .w { display: grid; grid-template-columns: 27rem 1fr; gap: 6rem; align-items: center; }
#case .case_nav { display: flex; flex-flow: wrap; margin-bottom: 3rem; gap: 3rem; }
#case .case_nav li {}
#case .case_nav li a { display: block; padding: 1.5rem 3rem; border-bottom: solid 1px #46C69D; color: #333; font-size: 1.8rem; text-decoration: none; }
#case .case_nav li a.active { border-bottom: solid 1px transparent; border-radius: 0.5rem; color: #FFF; background-color: #46C69D; font-weight: bold; }
#case .case { display: grid; width: 100% !important; padding-top: 4rem; padding-bottom: 4rem; padding-left: 4rem !important; padding-right: 4rem !important; border-radius: 1rem; border: 1rem; background-color: #F4F4F4; align-items: center; grid-template-columns: 40rem 1fr; gap: 4rem; }
#case .case .pw img { border-radius: 1rem; }
#case .case h3 { display: inline-block; margin-top: 2rem; padding: 0.5rem 1.5rem; border: solid 1px #46C69D; border-radius: 0.5rem; color: #46C69D; background-color: #FFF; font-size: 1.8rem; }
#case .case h3:first-child { margin-top: 0; }
#case .case p { font-size: 2rem; line-height: 1.6; }
@media screen and (max-width:1260px) {
	#case .case { padding-top: 3rem; padding-bottom: 3rem; padding-left: 3rem !important; padding-right: 3rem !important; display: flex; flex-direction: column; gap: 3rem; }
}
@media screen and (max-width:896px) { /* m */
	#case .case_nav { margin-bottom: 2rem; gap: 1.5rem; }
	#case .case_nav li a { padding: 1rem 2rem; font-size: 1.6rem; }
	#case .w { grid-template-columns: 16rem 1fr; gap: 3rem; }
}
@media screen and (max-width:480px) { /* s */
	#case .w { display: flex; flex-direction: column; }
	#case .case h3 { margin-top: 1.5rem; font-size: 1.6rem; }
	#case .case h3:first-child { margin-top: 0; }
	#case .case p { font-size: 1.6rem; }
}

/* function ----------*/
#function { background-image: url(../img/index/function_bg_01.jpg); background-repeat: no-repeat; background-position: center bottom; background-size: cover; background-attachment: fixed; }
#function .function_list {}
#function .function_list .title { display: grid; place-items: center; }
#function .function_list .function { display: flex; flex-direction: column; padding: 3rem; border-radius: 1rem; background-color: #FFF; gap: 2rem; justify-content: center; }
#function .function_list .function h3 { color: #0060AF; font-size: 2.4rem; text-align: center; }
#function .function_list .function .pw { text-align: center; }
#function .function_list .function p { font-size: 1.6rem; text-align: center; }
@media screen and (max-width:480px) { /* s */
	#function {  background-attachment: scroll; }
	#function .function_list .function { padding: 1.5rem; gap: 0.5rem; }
	#function .function_list .function h3 { font-size: 2rem; }
	#function .function_list .function .pw img { max-width: 10rem; margin: auto; }
	#function .function_list .function p { font-size: 1.6rem; }
}

/* flow ----------*/
#flow { background-image: url(../img/index/flow_bg.jpg); background-repeat: no-repeat; background-position: left bottom; background-size: cover; }
#flow .flow_list { display: grid; grid-template-columns: minmax(0, 38rem) minmax(9rem, 1fr) minmax(0, 38rem) minmax(9rem, 1fr) minmax(0, 38rem); gap: 0.5rem; }
#flow .flow_list .flow { display: flex; flex-direction: column; padding: 3rem; border-radius: 1rem; background-color: #46C69D; gap: 2rem; }
#flow .flow_list .flow .pw { text-align: center; }
#flow .flow_list .flow .tw { display: flex; flex-direction: column; border-top: solid 1px rgba(255, 255, 255, 0.5); gap: 1rem; }
#flow .flow_list .flow h3 { padding-top: 2rem; color: #FFF; font-size: 2.4rem; text-align: center; }
#flow .flow_list .flow p { margin: 0; color: #FFF; font-size: 1.6rem; text-align: center; }
#flow .flow_list .arrow { display: grid; text-align: center; place-items: center; }
@media screen and (max-width:896px) { /* m */
	#flow .flow_list { max-width: 60rem; margin: auto; display: flex; flex-direction: column; gap: 1rem; }
	#flow .flow_list .flow h3 { font-size: 2rem; }
	#flow .flow_list .flow .pw img { max-width: 16rem; margin: auto; }
}

/* question ----------*/
#question { background: rgba(54, 86, 114, 0.10); }
#question .inner { max-width: 100rem; }
#question .question_list {}
#question .question_list li { margin-top: 2rem; padding: 2rem 3rem; border-radius: 0.5rem; background-color: #FFF; }
#question .question_list li span { display: block; }
#question .question_list li .qw .q::before, #question .question_list li .aw .a::before { position: absolute; bottom: 0; left: 0; display: block; width: 3rem; margin: auto; font-size: 3rem; font-weight: bold; text-align: center; line-height: 1; } 
#question .question_list li .qw {}
#question .question_list li .qw .q { position: relative; padding-left: 4.4rem; font-weight: bold; font-size: 2rem; }
#question .question_list li .qw .q::before { content: "Q"; top: 0; color: #46C69D; }
#question .question_list li .aw {}
#question .question_list li .aw .a { position: relative; margin-top: 2rem; padding-left: 4.4rem; padding-top: 2rem; border-top: solid 1px rgba(0, 0, 0, 0.1); font-size: 1.8rem; }
#question .question_list li .aw .a::before { content: "A"; top: 2rem; color: #FF5252; }

/* contact ----------*/
#contact { background: #F5F5F5; }