@charset "UTF-8";
img{ vertical-align: bottom;}
#lop_mein_title_box{background:url("../images/main_bg.jpg")no-repeat center left;background-size:cover;}
#lop_mein_title_box .title_box span{ font-size: 2.8em; line-height: 1.4; font-weight: 900; background: #006c95; background: -moz-linear-gradient(top, #006c95 0%, #2f4496 100%); background: #006c95; background: -moz-linear-gradient(left, #006c95 0%, #2f4496 100%); background: -webkit-linear-gradient(left, #006c95 0%, #2f4496 100%); background: linear-gradient(to right, #006c95 0%, #2f4496 100%); background-clip: text; -webkit-text-fill-color: transparent; color: transparent;}
.sec{ margin-bottom: 120px;}
.sec .inner .ttl_wrap{ margin-bottom: 100px; position: relative;}
.sec .inner .ttl_wrap::before{ content: ""; background: url("../images/ttl_dec@2x.png")no-repeat; background-size: 100%; width: 111px; height: 14px; position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%); z-index: -1;}
.sec .inner .ttl_wrap .ttl{ font-size: 3.2em; font-weight: 500;}
.sec .inner .photo_box a{ transition: .3s;}
/*#sec01*/
#sec01 .inner .flex_wrap{ margin: 50px auto;}
#sec01 .inner .flex_wrap .item{ padding: 20px 60px; box-sizing: border-box; border-radius: 10px; position: relative; display: inline-block;}
#sec01 .inner .flex_wrap .item:first-child{ margin-bottom: 30px; background-color: #ffeedf; }
#sec01 .inner .flex_wrap .item:first-child::before{ content: ""; background: url("../images/ill10@2x.png")no-repeat; background-size: 100%; width: 65px; height: 87px; position: absolute; left: -20px; top: -10px;}
#sec01 .inner .flex_wrap .item:first-child::after{ content: ""; background: url("../images/ill11@2x.png")no-repeat; background-size: 100%; width: 58px; height: 56px; position: absolute; right: -20px; bottom: -10px;}
#sec01 .inner .flex_wrap .item:last-child{ background-color: #e8f4ff;}
#sec01 .inner .flex_wrap .item:last-child::before{ content: ""; background: url("../images/ill13@2x.png")no-repeat; background-size: 100%; width: 51px; height: 55px; position: absolute; left: -20px; top: -10px;}
#sec01 .inner .flex_wrap .item:last-child::after{ content: ""; background: url("../images/ill12@2x.png")no-repeat; background-size: 100%; width: 50px; height: 76px; position: absolute; right: -20px; bottom: -10px;}
#sec01 .inner .flex_wrap .item p{ font-size: 2.4em; font-weight: 700; text-align: center; line-height: 1.4;}
#sec01 .inner .flex_wrap .item p span{ font-size: 1.4em;}
#sec01 .inner .flex_wrap .item p span.orange{ color: #ff931e; font-weight: 900;}
#sec01 .inner .main_img{ margin-bottom: 70px;}
#sec01 .inner .main_img ul{ display: flex; flex-wrap: wrap; gap: 20px;}
#sec01 .inner .main_img ul li{ width: calc((100% - 40px) / 3);}
#sec01 .inner .main_img ul li:first-child{ width: 100%; position: relative;}
#sec01 .inner .main_img ul li:first-child::before{ content: ""; background: url("../images/ill03@2x.png")no-repeat; background-size: 100%; width: 200px; height: 130px; position: absolute; right: -20px; bottom: -10px;}
#sec01 .inner .main_img ul li img{ width: 100%; height: auto; border-radius: 10px; overflow: hidden;}
#sec01 .inner .main_img ul li:first-child img{ border-radius: 20px;}
#sec01 .inner .photo_box.bg_green,
#sec01 .inner .photo_box.bg_pink{ padding: 30px; box-sizing: border-box; border-radius: 20px;}
#sec01 .inner .photo_box.bg_green{ border: 5px solid #eefae5;}
#sec01 .inner .photo_box.bg_green ul{ overflow-y: scroll; height: 700px;}
#sec01 .inner .photo_box.bg_pink{ border: 5px solid #ffe8f1; margin-top: 70px;}
#sec01 .inner .photo_box ul{ display: flex; flex-wrap: wrap; gap: 20px;}
#sec01 .inner .photo_box li{ width: calc((100% - 40px) / 3);}
#sec01 .inner .photo_box li a{ display: block; border-radius: 10px; overflow: hidden;}
#sec01 .inner .photo_box li a img{ width: 100%; height: auto;}
/*#sec02*/
#sec02 .inner .img_wrap{ width: 800px; margin: 0 auto;}
#sec02 .inner .img_wrap img{ width: 100%; height: auto;}
#sec02 .inner .kome{ font-size: 1.4em; margin-top: 20px;}
/*#sec03*/
#sec03 .inner .list{ position: relative; display: flex; gap: 20px; justify-content: center;}
#sec03 .inner .list::before{ content: ""; background: url("../images/ill04@2x.png")no-repeat; background-size: 100%; width: 170px; height: 103px; position: absolute; left: 0; bottom: -90px;}
#sec03 .inner .list::after{ content: ""; background: url("../images/ill08@2x.png")no-repeat; background-size: 100%; width: 241px; height: 92px; position: absolute; right: 0; top: -120px;}
#sec03 .inner .list li{ font-size: 1.8em; font-weight: 700; box-sizing: border-box; width: 160px;}
#sec03 .inner .list li a{ text-decoration: none; padding: 20px 0; color: #000; background: #ffc896; border-radius: 50px; width: 100%; display: block; box-sizing: border-box; transition: .3s;}
#sec03 .inner .btn{ margin: 160px auto 0;}
#sec03 .inner .btn a{ display: block; text-decoration: none; background: #006c95; border-radius: 10px; background: -moz-linear-gradient(top, #006c95 0%, #2f4496 100%); background: #006c95; background: -moz-linear-gradient(left, #006c95 0%, #2f4496 100%); background: -webkit-linear-gradient(left, #006c95 0%, #2f4496 100%); background: linear-gradient(to right, #006c95 0%, #2f4496 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006c95', endColorstr='#2f4496',GradientType=1 ); width: 540px; height: 80px; position: relative; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; margin: 0 auto;}
#sec03 .inner .btn a span{ font-size: 2.4em; font-weight: 700; color: #FFF; position: absolute; top: 50%; right: 10%; transform: translateY(-55%);}
#sec03 .inner .btn a::before{ content: ""; display: block; width: 30px; height: 30px; background: url("../images/download@2x.png") no-repeat; background-size: cover; position: absolute; top: 50%; left: 43px; transform: translateY(-50%);}
/*#sec04*/
#sec04 .inner > .img_wrap{ width: 800px; margin: 0 auto; position: relative;}
#sec04 .inner > .img_wrap::before{ content: ""; background: url("../images/ill05@2x.png")no-repeat; background-size: 100%; width: 131px; height: 170px; position: absolute; left: -80px; bottom: -20px;}
#sec04 .inner > .img_wrap::after{ content: ""; background: url("../images/ill07@2x.png")no-repeat; background-size: 100%; width: 130px; height: 132px; position: absolute; right: -80px; bottom: -20px;}
#sec04 .inner > .img_wrap img{ width: 100%; height: auto;}
#sec04 .inner ul{ display: flex; flex-wrap: wrap; gap: 40px 20px; margin-top: 70px; position: relative;}
#sec04 .inner ul .loc_item{ width: calc((100% - 20px) / 2);}
#sec04 .inner ul .loc_item .img_wrap{ border-radius: 10px; overflow: hidden; width: 100%;}
#sec04 .inner ul .loc_item .img_wrap img{ width: 100%; height: auto;}
#sec04 .inner ul .loc_item .flex_wrap{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 10px; font-size: 1.6em; font-weight: 700; gap: 5px;}
#sec04 .inner .btn{ margin: 160px auto 0; position: relative;}
#sec04 .inner .btn a{ display: block; text-decoration: none; background: #006c95; border-radius: 10px; background: -moz-linear-gradient(top, #006c95 0%, #2f4496 100%); background: #006c95; background: -moz-linear-gradient(left, #006c95 0%, #2f4496 100%); background: -webkit-linear-gradient(left, #006c95 0%, #2f4496 100%); background: linear-gradient(to right, #006c95 0%, #2f4496 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006c95', endColorstr='#2f4496',GradientType=1 ); width: 360px; height: 80px; position: relative; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; margin: 0 auto;}
#sec04 .inner .btn a span{ font-size: 2.4em; font-weight: 700; color: #FFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#sec04 .inner .btn::before{ content: ""; background: url("../images/ill06@2x.png")no-repeat; background-size: 100%; width: 191px; height: 101px; position: absolute; right: 0; bottom: 0;}
#sec04 .inner .btn::after{ content: ""; background: url("../images/ill09@2x.png")no-repeat; background-size: 100%; width: 171px; height: 180px; position: absolute; right: 130px; bottom: 0;}

@media screen and (min-width: 768px) {
    .sec .inner .photo_box a:hover{ opacity: .5;}
    #sec03 .inner .list li a:hover{ background: #ffeedf;}
	#sec03 .inner .btn a:hover{ opacity: .7;}
	#sec04 .inner .btn a:hover{ opacity: .7;}
}
@media screen and (max-width: 767px) {
    #lop_mein_title_box .title_box span{ font-size: 2em;}
    .sec{ margin-bottom: 50px;}
    .sec .inner .ttl_wrap{ margin-bottom: 60px;}
    .sec .inner .ttl_wrap::before{ bottom: -30px;}
    .sec .inner .ttl_wrap .ttl{ font-size: 2.4em;}
    /*#sec01*/
    #sec01 .inner .flex_wrap{ margin: 30px auto 30px;}
    #sec01 .inner .flex_wrap .item{ padding: 15px 0; width: 100%}
	#sec01 .inner .flex_wrap .item:first-child{ margin-bottom: 20px;}
	#sec01 .inner .flex_wrap .item:first-child::before{ width: 45px; height: 45px; left: -10px;}
	#sec01 .inner .flex_wrap .item:first-child::after{ width: 43px; height: 43px; right: -10px;}
	#sec01 .inner .flex_wrap .item:last-child::before{ width: 41px; height: 44px; left: -10px;}
	#sec01 .inner .flex_wrap .item:last-child::after{ width: 40px; height: 44px; right: -10px;}
    #sec01 .inner .flex_wrap .item p{ font-size: 1.6em;}
    #sec01 .inner .flex_wrap .item p span{ font-size: 1.4em;}
    #sec01 .inner .main_img{ margin-bottom: 30px;}
    #sec01 .inner .main_img ul li{ width: 100%;}
    #sec01 .inner .main_img ul li:first-child{ border-radius: 10px;}
    #sec01 .inner .main_img ul li:first-child::before{ width: 100px; height: 64px; right: -10px;}
    #sec01 .inner .main_img ul li:first-child img{ border-radius: 10px;}
    #sec01 .inner .photo_box.bg_green,
    #sec01 .inner .photo_box.bg_pink{ padding: 10px; border-radius: 10px;}
    #sec01 .inner .photo_box.bg_green{ border: 3px solid #eefae5;}
    #sec01 .inner .photo_box.bg_green ul{ overflow-y: scroll; height: 100%; aspect-ratio: 6 / 7;}
    #sec01 .inner .photo_box.bg_pink{ border: 3px solid #ffe8f1; margin-top: 30px;}
    #sec01 .inner .photo_box ul{ gap: 10px;}
    #sec01 .inner .photo_box li{ width: calc((100% - 10px) / 2);}
    /*#sec02*/
    #sec02 .inner .img_wrap{ width: 100%;}
    /*#sec03*/
    #sec03{ margin-bottom: 50px;}
    #sec03 .inner .list{ flex-wrap: wrap; gap: 10px;}
    #sec03 .inner .list::before{ width: 120px; height: 70px; left: 0; bottom: -70px;}
    #sec03 .inner .list::after{ width: 150px; height: 56px; right: 0; top: auto; bottom: -70px;}
    #sec03 .inner .list li{ font-size: 1.6em; width: 140px;}
    #sec03 .inner .list li a{ padding: 15px 0;}
	#sec03 .inner .btn{ margin: 110px auto 0;}
	#sec03 .inner .btn a{ width: 300px; height: 80px;}
	#sec03 .inner .btn a span{ font-size: 1.8em; right: 15%; line-height: 1.4; text-align: left;}
	#sec03 .inner .btn a::before{ left: 36px;}
    /*#sec04*/
    #sec04 .inner > .img_wrap{ width: 100%;}
    #sec04 .inner > .img_wrap::before{ width: 50px; height: 67px; left: -10px; bottom: -20px;}
    #sec04 .inner > .img_wrap::after{ width: 60px; height: 60px; right: -10px; bottom: -20px;}
    #sec04 .inner ul{ gap: 20px 10px; margin-top: 50px;}
    #sec04 .inner ul .loc_item { width: calc((100% - 10px) / 2);}
    #sec04 .inner ul .loc_item .flex_wraps{ font-size: 1.4em;}
	#sec04 .inner .btn{ margin: 80px auto 0; display: inline-block;}
	#sec04 .inner .btn a{ width: 240px; height: 80px;}
	#sec04 .inner .btn a span{ font-size: 1.8em; line-height: 1.4; white-space: nowrap;}
    #sec04 .inner .btn::before{ width: 80px; height: 40px; left: -25px; bottom: -10px; z-index: 999;}
    #sec04 .inner .btn::after{ width: 65px; height: 68px; right: -30px; bottom: -20px;}
}

@media screen and (max-width: 499px) {
    #sec04 .inner ul .loc_item .flex_wrap{ flex-wrap: wrap; text-align: left; gap: 5px;}
    #sec04 .inner ul .loc_item .flex_wrap p{ display: block; width: 100%;}
}