html {
scroll-behavior: smooth;
overflow-x: hidden;
}
#a{
padding-top: 70px;
margin-top:-70px;
}
#b{
padding-top: 70px;
margin-top:-70px;
}
#c{
padding-top: 70px;
margin-top:-70px;
}
#d{
padding-top: 100px;
margin-top:-100px;
}
.bg_txt img{width: 100%; height: auto;}
.bg_r img{width: 100%; height: auto;}
.accordion-label_ {
position: relative;
display: block;
cursor: pointer;
padding: 15px;
border-right: 40px solid #26798d;
border-top: solid 3px #26798d;
border-left: solid 3px #26798d;
border-bottom: solid 3px #26798d;
background-color: #fff;
font-size: 18px;
font-weight: bold;
text-align: left;
border-radius: 20px;
z-index: 1;
}
h3{font-size: 20px; margin-bottom: 10px; color: #eb4a8a; margin-top: 30px;}
h4{font-size: 16px; text-align: left; margin-bottom: 10px; color: #CE3A88;}
.main{
/*margin-bottom: -65px;*/
}
.main p{margin-bottom: 20px;}
.main img{width: 100%;}
.main_btn{ width: 100%;width: 96%; margin-left: 2%; float: left; z-index: 1; position:relative; top:-50px;}
.main_btn .btn_inner{ float: left; width: 48%; margin: 1%;transition: 0.3s;}
.main_btn img{width: 100%; height: auto;}
.main_btn img:hover{
opacity: 0.7;
}
.jo_btn img:hover{
opacity: 0.7;
}
.comment02{padding-left: 20px; padding-right: 20px; margin-top: -20px; background-color: #c7f1ff; margin-bottom: -40px; }
.comment{ padding-left: 20px; padding-right: 20px; margin-top: 20px;}
.merit{float: left; width: 100%; margin-top: 5px; margin-bottom: 30px;}
.merit .m_l{width: 18%; float: left;}
.merit .m_r{width: 80%; float: right;}
.merit p{font-size: 13px; line-height: 150%; margin-top: 10px; text-align: left;}
.horizontal-items {
display: flex;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.item {
padding: 0;
}
.item img{width: 1800px;}
.ao_link a{background-color: #ff9400; color: #fff; padding: 10px; border-radius: 20px;}
.major_box{width: 48%; margin: 1%; float: left;}
.major_box p{margin-bottom: 20px; line-height: 130%;}
.major_box a{color: #14356a;}
.major_box a:hover{text-decoration: underline;}
.oc_bg img{width: 100%; height: auto;}
.lp_btn_{
display: flex;
margin: 0 auto;
justify-content: center;
padding-top: 10px;
padding-bottom: 20px;
}
.lp_btn_ a {
width: 33%;
padding: 8px;
}
.lp_btn_ img {
width: 100%; height: auto;
}
.h2-img{
width:50%;
margin-left: 25%;
margin-top: 20px;
margin-bottom: 10px;
}
.oc_title img, .oc-time-title img {width: 80%; height: auto;
margin-left: 10%;}
.oc-time-title-a img {width: 60%;}
.oc-time-title-b img {width: 60%;}
.job-box-a .job-cap{ font-size: 70%; font-weight: 100;}
.scroll_content-b li{ width: 35%;}
.point-box1 {
padding: 0.8em;
margin: 2em 0 1em;
background: #008fc6;
border-radius: 30px;
}
.point-box1 h2 {
font-size: 1.2rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.point-box2 {
padding: 0.8em;
margin: 2em 0 1em;
background: #84ccce;
border-radius: 30px;
}
.point-box2 h2 {
font-size: 1.4rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.point-box3 {
padding: 0.8em;
margin: 2em 0 1em;
background: #65b2e2;
border-radius: 30px;
}
.point-box3 h2 {
font-size: 1.4rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.point ul{ max-width: 600px; margin: 0 auto;}
.point li {
font-size: 0.95rem;
line-height: 2.8rem;
font-weight: bold;
}
.support h2{
font-size: 1.8rem;
margin: 20px 0;
text-align: center;
}
.support p{
font-size: 18px;
line-height: 2rem;
margin-bottom: 20px;
}
.sps{display: none;}
.faq_top img{
width: 60%;
margin: 0 auto;
margin-top: 20px;
}
.job-box-a p{
font-size: 15px;
margin: 0; padding: 0;
}
/*繝倥ャ繝繝ｼ*/
header {
position: fixed;
z-index: 999;
top: 0;
width: 100%;
height: 60px;
background-color: #fff;
padding: 10px 20px;
border-bottom: 1px solid #000;
}
.logo img {
height: 60px;
}
@media screen and (max-width:567px) {
header{
height: 50px;
}
.logo img{
height: auto;
width: 70%;
}
}
/*----------------------------
scroll_up �應ｸ九°繧我ｸ翫∈蜃ｺ迴ｾ
----------------------------*/
.scroll_up {
transition: 0.8s ease-in-out;
transform: translateY(30px);
opacity: 0;
}
.scroll_up.on {
transform: translateY(0);
opacity: 1.0;
}
/*----------------------------
scroll_left �懷ｷｦ縺九ｉ蜃ｺ迴ｾ
----------------------------*/
.scroll_left {
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
transform: translateX(-30px);
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
}
.scroll_left.on {
opacity: 1.0;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
transform: translateX(0);
}
/*----------------------------
scroll_right �懷承縺九ｉ蜃ｺ迴ｾ
----------------------------*/
.scroll_right {
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
transform: translateX(30px);
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
}
.scroll_right.on {
opacity: 1.0;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
transform: translateX(0);
}
.
.intro h2 {
font-size: 1.4rem;
color: #000;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
.intro h3 {
font-size: 1.3rem;
color: #466482;
font-weight: bold;
text-align: left;
margin-bottom: 20px;
}
.intro_line h2 {
font-size: 1.4rem;
color: #000;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
.intro_line h3 {
font-size: 1.2rem;
color: #466482;
font-weight: bold;
text-align: left;
/*margin-bottom: 20px;*/
}
.intro_noline h3 {
font-size: 1.2rem;
color: #466482;
font-weight: bold;
text-align: left;
/*margin-bottom: 20px;*/
}
.faq h3 {
font-size: 1.2rem;
color: #466482;
font-weight: bold;
text-align: left;
/*margin-bottom: 20px;*/
}
.h3_yellow{color:#f0ec81;}
.col2 li {
width : calc(100% / 2) ;
float: left;
}
.col2 img{width: 100%;cursor: pointer; }
.col3 li {
width : calc(100% / 3) ;
float: left;
}
.col3 img{width: 100%;cursor: pointer;}
.image_link{
display:block;
position:relative;
text-decoration:none;
overflow:hidden;
}
.image_link img{
transition:0.3s;
display:block;
width:100%;
}
.image_link:hover img{
transform:scale(1.1);cursor: pointer;
}
/* Google Map繧貞峇縺�ｦ∫ｴ� */
.map {
position: relative;
width: 100%;
height: 0;
padding-top: 65%; /* 豈皮紫繧�4:3縺ｫ蝗ｺ螳� */
}
/* Google Map縺ｮiframe */
.map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*----------------------------
繧ｿ繝門�繧頑崛縺�02
----------------------------*/
.tabBox .tabArea {
width: 100%;
height: 80px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
margin-top: -20px;
}
.tabBox .tabArea .one_tab {
width: 50%;
display: block;
text-decoration: none;
transition-duration: 0.3s;
text-align: center;
color: #fff;
cursor: pointer;
/*float: left;*/
}
.tabBox .tabArea .one_tab .tab_l{float: left; width: 78%; padding-left: 5%;}
.tabBox .tabArea .one_tab .tab_l img{width: 100%; height: auto;}
.tabBox .tabArea .one_tab .tab_r{float: right; width: 10%; padding-right: 5%;}
.tabBox .tabArea .one_tab .tab_r img{width: 100%; height: auto;}
.tabBox .tabArea .one_tab:hover {
opacity: 0.7;
text-decoration: none;
}
.tabBox .tabArea.bottom {
align-items: flex-start;
}
.contents{ margin-top: -70px;}
.contents .tab_main {
display: none;
padding: 25px 0px;
text-align: center;
min-height: 280px;
/*border: 2px solid #94ad73;*/
transition-duration: 0.3s;
}
.contents img{width: 100%;}
.tab_main.is_show {
display: block;
}
.tab_main:nth-child(1).is_show {
/*border: 2px solid #94ad73;*/
}
.tab_main:nth-child(2).is_show {
/*border: 2px solid #e6de6b;*/
}
.tab_main:nth-child(3).is_show {
/*border: 2px solid #e8a48b;*/
}
/*====================================================================
Slick縲�
====================================================================*/
.slider img {
height: auto;
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: #000;
}
.slick-dots li button:before{
font-size:20px!important;
margin-top: 20px;
}
.slider {/*讓ｪ蟷�94%縺ｧ蟾ｦ蜿ｳ縺ｫ菴咏區繧呈戟縺溘○縺ｦ荳ｭ螟ｮ蟇�○*/
width:94%;
margin:0 auto;
}
/*slick縺ｮJS縺ｧ譖ｸ縺九ｌ繧九ち繧ｰ蜀�√せ繝ｩ繧､繝牙ｷｦ蜿ｳ縺ｮ菴咏區隱ｿ謨ｴ*/
.slider .slick-slide {
margin:0 5px;
}
.slider02 img {
height: auto;
width: 100%;
}
.slider02 {/*讓ｪ蟷�94%縺ｧ蟾ｦ蜿ｳ縺ｫ菴咏區繧呈戟縺溘○縺ｦ荳ｭ螟ｮ蟇�○*/
width:100%;
margin:0 auto;
}
/*slick縺ｮJS縺ｧ譖ｸ縺九ｌ繧九ち繧ｰ蜀�√せ繝ｩ繧､繝牙ｷｦ蜿ｳ縺ｮ菴咏區隱ｿ謨ｴ*/
.slider02 .slick-slide {
margin:0 5px;
}
.slider03 img {
height: auto;
width: 100%;
}
.slider03 {/*讓ｪ蟷�94%縺ｧ蟾ｦ蜿ｳ縺ｫ菴咏區繧呈戟縺溘○縺ｦ荳ｭ螟ｮ蟇�○*/
width:100%;
margin:0 auto;
}
/*slick縺ｮJS縺ｧ譖ｸ縺九ｌ繧九ち繧ｰ蜀�√せ繝ｩ繧､繝牙ｷｦ蜿ｳ縺ｮ菴咏區隱ｿ謨ｴ*/
.slider03 .slick-slide {
margin:0 5px;
}
.tab_main .slider04 {/*讓ｪ蟷�94%縺ｧ蟾ｦ蜿ｳ縺ｫ菴咏區繧呈戟縺溘○縺ｦ荳ｭ螟ｮ蟇�○*/
clear: both;
width:94%;
margin:0 auto;
}
.tab_main .slider04 img {
height: auto;
width: 100%;
}
/*slick縺ｮJS縺ｧ譖ｸ縺九ｌ繧九ち繧ｰ蜀�√せ繝ｩ繧､繝牙ｷｦ蜿ｳ縺ｮ菴咏區隱ｿ謨ｴ*/
.tab_main .slider04 .slick-slide {
margin:0 5px;
}
.slider05 img {
height: auto;
width: 100%;
}
.slider05 {/*讓ｪ蟷�94%縺ｧ蟾ｦ蜿ｳ縺ｫ菴咏區繧呈戟縺溘○縺ｦ荳ｭ螟ｮ蟇�○*/
width:100%;
margin:0 auto;
margin-top: -20px;
}
/*slick縺ｮJS縺ｧ譖ｸ縺九ｌ繧九ち繧ｰ蜀�√せ繝ｩ繧､繝牙ｷｦ蜿ｳ縺ｮ菴咏區隱ｿ謨ｴ*/
.slider05 .slick-slide {
margin:0 5px;
}
.slider06 img {
height: auto;
width: 100%;
}
.slider06 {/*讓ｪ蟷�94%縺ｧ蟾ｦ蜿ｳ縺ｫ菴咏區繧呈戟縺溘○縺ｦ荳ｭ螟ｮ蟇�○*/
width:100%;
margin:0 auto;
}
/*slick縺ｮJS縺ｧ譖ｸ縺九ｌ繧九ち繧ｰ蜀�√せ繝ｩ繧､繝牙ｷｦ蜿ｳ縺ｮ菴咏區隱ｿ謨ｴ*/
.slider06 .slick-slide {
margin:0 5px;
}
.slider07 img {
height: auto;
width: 100%;
}
.slider07 {/*讓ｪ蟷�94%縺ｧ蟾ｦ蜿ｳ縺ｫ菴咏區繧呈戟縺溘○縺ｦ荳ｭ螟ｮ蟇�○*/
width:100%;
margin:0 auto;
}
/*slick縺ｮJS縺ｧ譖ｸ縺九ｌ繧九ち繧ｰ蜀�√せ繝ｩ繧､繝牙ｷｦ蜿ｳ縺ｮ菴咏區隱ｿ謨ｴ*/
.slider07 .slick-slide {
margin:0 5px;
}
.slider08 img {
height: auto;
width: 100%;
}
.slider08 {/*讓ｪ蟷�94%縺ｧ蟾ｦ蜿ｳ縺ｫ菴咏區繧呈戟縺溘○縺ｦ荳ｭ螟ｮ蟇�○*/
width:100%;
margin:0 auto;
}
/*slick縺ｮJS縺ｧ譖ｸ縺九ｌ繧九ち繧ｰ蜀�√せ繝ｩ繧､繝牙ｷｦ蜿ｳ縺ｮ菴咏區隱ｿ謨ｴ*/
.slider08 .slick-slide {
margin:0 5px;
}
/*遏｢蜊ｰ縺ｮ險ｭ螳�*/
.slick-prev,
.slick-next {
position: absolute;/*邨ｶ蟇ｾ驟咲ｽｮ縺ｫ縺吶ｋ*/
top: 106%;
padding: 0 40px 0 30px;
}
.slick-prev:before{
content: "\f053";
font-family: "Font Awesome 5 Free";
font-weight: 900;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-weight: 700;
}
.slick-next:before{
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-weight: 700;
padding-left: -80px;
}
/*page top*/
#page-top {
position: fixed;
bottom: 80px;
right: 10px;
font-size: 14px;
line-height: 1;
z-index: 99;
}
#page-top a {
background: #e4007f;
text-decoration: none;
color: #fff;
width: 60px;
padding: 28px 5px;
text-align: center;
display: block;
border-radius: 90px;
opacity: 0.9;
transition: all .3s ease;
}
#page-top a:hover {
text-decoration: none;
opacity: .5;
}
.point ul li{list-style: none;}
/*蜈ｨ菴鍋噪縺ｪ縺薙→*/
body {
position: relative;
min-width: 980px;
height: 100%;
background: #fff;
color: #222;
margin: 0;
word-wrap: break-word;
letter-spacing: .1em;
font-weight: 400;
font-size: 1.3rem;
font-family: "Lato","Hiragino Kaku Gothic ProN", "Meiryo", "verdana", sans-serif;
line-height: 1.4;
overflow-wrap: break-word;
-webkit-text-size-adjust: 100%;
p {
overflow: hidden;
color: #303030;
font-size: 14px;
line-height: 1.8rem;
}
a {
text-decoration: none;
}
ul,li {
list-style: none;
}
.h2-img{
width: 100%;
margin-top: 20px;
margin-bottom: 10px;
}
h3{
font-size: 2rem;
line-height: 1.75;
}
vertical-align:top;
}
section{
margin: 40px auto;
}
.sp {
display: none;
}
.br-sp {
display: none;
}
.lp{
border: 1px solid #cba46b;
background: #fff;
width: clamp(400px, 45vw, 1280px);
margin-left: 65.5vw;
max-width: 480px;
}
.lp-bg{
background-attachment: fixed;
background-size: cover;
background-position: center;
background-image: url('/lp/2612spdc/images/bg.jpg');
}
@media screen and (max-width:1280px) and (min-width:767px){
.lp{
border: 1px solid #cba46b;
background: #fff;
width: clamp(400px, 45vw, 767px);
margin-left: 45.5vw;
max-width: 480px;
}
}
@media screen and (max-width:767px) {
body {
min-width: 100%;
}
.main{
width: 100%;
}
p {
font-size: 13px;
line-height: 1.8rem;
}
h3 {
font-size: 1.4rem;
}
h2{
text-align: center;
}
.lp{
width: 100%;
margin: 0 auto;
border: 0px solid #000;
}
}
/*TOP逕ｻ蜒�*/
.lpimg{
width: 100%;
text-align: center;
height: auto;
margin-bottom: 0;
}
.lpimg img {
width: 100%;
margin-top: 45px;
margin-bottom: 0;
}
/*繝懊ち繝ｳ*/
.btn_bg{
background-color: #fff;
}
.lp_btn{
display: flex;
margin: 0 auto;
justify-content: center;
padding-top: 10px;
padding-bottom: 20px;
}
.lp_btn img {
width: 100%;
}
/*蟄ｦ縺ｹ繧句�驥�*/
.job{
margin: 0 auto;
width: 100%;
margin-top: -15px;
}
.job-box{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 auto;
width: 100%;
padding-bottom: 30px;
}
/*繝昴ャ繝励い繝��*/
center{
display: none;
}
.modal-wrapper {
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 40px 10px;
text-align: center;
}
.modal-wrapper:not(:target) {
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
}
.modal-wrapper:target {
opacity: 1;
visibility: visible;
transition: opacity .4s, visibility .4s;
}
.modal-wrapper::after {
display: inline-block;
height: 100%;
margin-left: -.05em;
vertical-align: middle;
content: ""
}
.modal-wrapper .modal-window {
box-sizing: border-box;
display: inline-block;
z-index: 20;
position: relative;
width: 70%;
max-width: 600px;
border-radius: 2px;
box-shadow: 0 0 30px rgba(0, 0, 0, .6);
vertical-align: middle
}
.modal-wrapper .modal-window .modal-content {
max-height: 80vh;
overflow-y: auto;
text-align: left
}
.modal-overlay {
z-index: 10;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8)
}
.modal-wrapper .modal-close {
z-index: 20;
position: absolute;
top: 36px;
right: 25px;
width: 34px;
color: #95979c !important;
font-size: 45px;
font-weight: 700;
line-height: 35px;
text-align: center;
text-decoration: none;
text-indent: 0;
}
.modal-wrapper .modal-close:hover {
color: #2b2e38 !important
}
.modal-img {
width: 100%;
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}
.far {
font-weight: 400;
}
.fa-times-circle:before {
content: "\f057";
}
@media screen and (max-width:767px) {
.modal-wrapper .modal-window {
width: 90%;
}
.modal-wrapper .modal-close {
top: 2px;
right: 3px;
font-size: 30px;
}
}
/*繧｢繧ｯ繧ｻ繧ｹ*/
.life_bg {
padding: 56px;
background-color: #d4e7e5;
margin: 0 calc(50% - 50vw);
text-align: center;
}
.life-title{
text-align: center;
}
.life-box{
width: 800px;
margin: 0 auto;
}
.life-img{
text-align: center;
}
.life-txt{
margin: 20px 0;
}
.life-box span {
background:linear-gradient(transparent 60%, #ff6 60%);
}
.life-img iframe{
width: 100%;
height: 350px;
}
@media screen and (max-width:767px) {
.life_bg:after {
height: 450px;
width: 60vw;
top: -30px;
}
.life_bg img{
width: 100%;
}
.life-box{
width: 90%;
}
.life-img img{
width: 100%;
}
.life_bg {
padding: 40px 0;
}
}
/*繧ｪ繝ｼ繝励Φ繧ｭ繝｣繝ｳ繝代せ*/
.oc_bg {
background: linear-gradient(
to top,
#e0e680 0%,
#1f6735 100%
);
padding: 40px 0;
position: relative;
text-align: left;
}
.oc{
width: 100%;
margin: 0 auto;
}
.oc p{
margin: 20px 0;
}
.oc-box{
padding: 0.7em;
margin: 0.7em ;
background: #fff;
}
.oc-time{
text-align: center;
margin: 25px 0;
}
.oc_title img, .oc-time-title img{
width: 100%;
}
.oc-time-title-a img, .oc-time-title-b img {
width: 80%;
}
.fa-circle-check{
content: "\f057";
}
/*譚･譬｡*/
.oc-time-title-a{
background: linear-gradient(180deg,rgba(2,36,80,0) 50% 50%,#022450 50%);
background-size: auto auto;
margin: 0;
}
.scroll_content-a {
display: flex;
max-width: 100%;
overflow-x: auto;
background-color: #022450;
}
.point{
position: sticky;
}
.point-box1 {
padding: 1em;
margin: 2em 0 1em;
background: #008fc6;
}
.point-box1 h2 {
font-size: 1.2rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.point li {
font-size: 16px;
line-height: 2.5rem;
}
.pop1 {
width: 180px;
position: absolute;
top: 330px;
left: -140px;
}
.oc-btn{
width: 70%;
margin: 20px auto;
}
.oc-btn img{
width: 100%;
}
.support h2{
font-size: 1.5rem;
margin: 20px 0;
text-align: center;
}
.support p{
font-size: 16px;
line-height: 2rem;
margin-bottom: 20px;
}
/*繝��繝悶Ν*/
.table {
border-collapse: collapse;
border: 2px solid #deb36c;
width: 100%;
font-size: 16px;
background-color: #fff;
}
.th {
border: 1px solid #000;
background: #033f75;
padding: 12px 20px;
color: #fff;
}
.td {
border: 1px solid #000;
padding: 12px 20px;
text-align: end;
}
/*繧ｪ繝ｳ繝ｩ繧､繝ｳ*/
.oc-time-title-b{
background: linear-gradient(180deg,rgba(244,244,244,0) 50% 50%,#95c8bf 50%);
background-size: auto auto;
margin: 0;
}
.scroll_content-b {
display: flex;
max-width: 100%;
overflow-x: auto;
background-color: #95c8bf;
}
.point-box2 {
padding: 1em;
margin: 2em 0 1em;
background: #84ccce;
}
.point-box2 h2 {
font-size: 1.2rem;
color: #fff;
font-weight: bold;
text-align: center;
}.point-box2 h2 {
font-size: 1.2rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.pop2 {
width: 180px;
position: absolute;
top: 280px;
right: -120px;
}
/*縺ｪ繧薙〒繧�*/
.point-box3 {
padding: 1em;
margin: 2em 0 1em;
background: #65b2e2;
}
.point-box3 h2 {
font-size: 1.2rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.pop3 {
width: 180px;
position: absolute;
top: 91px;
left: -154px;
}
/*繧ｹ繧ｱ繧ｸ繝･繝ｼ繝ｫ*/
.scroll_content-a li ,.scroll_content-b li {
width: 90%;
padding: 5px;
margin: 5px;
flex-shrink: 0;
}
.scroll_content-a img ,.scroll_content-b img{
width: 100%;
}
.scroll_content-a::-webkit-scrollbar {
height: 12px;
}
.scroll_content-b::-webkit-scrollbar {
height: 12px;
}
.scroll_content-a::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 6px;
}
.scroll_content-b::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 6px;
}
.scroll_content-a::-webkit-scrollbar-track {
background: #ddd;
border-radius: 6px;
}
.scroll_content-b::-webkit-scrollbar-track {
background: #ddd;
border-radius: 6px;
}
.oc_btn{
display: flex;
}
.oc_btn img{
margin: 20px;
}
@media screen and (max-width:767px) {
.oc_title img, .oc-time-title img{
width: 100%;
}
.oc-time-title-a img, .oc-time-title-b img {
width: 80%;
}
.scroll_content-a, .scroll_content-b{
padding: 0px;
}
.scroll_content-a li, .scroll_content-b li {
width: 280px;
padding: 10px;
}
.pop1,.pop2 ,.pop3 {
display: none;
}
}
/*繧医￥縺ゅｋ雉ｪ蝠�*/
.faq_top img{
width: 100%;
}
.accordion {
width: 94%;
margin: 0 auto;
}
.accordion-item {
margin-bottom: 2rem;
}
.accordion-check {
display: none;
}
.accordion-label {
position: relative;
display: block;
cursor: pointer;
padding: 15px;
border-right: 40px solid #26798d;
border-top: solid 3px #26798d;
border-left: solid 3px #26798d;
border-bottom: solid 3px #26798d;
background-color: #fff;
font-size: 18px;
font-weight: bold;
text-align: left;
border-radius: 20px;
z-index: 1;
}
.accordion-label::after {
width: 20px;
transform: translateY(-50%);
color: #ffffff;
font-size: 30px;
content: '+';
z-index: 1;
position: absolute;
right: -30px;
top: 50%;
}
.accordion-box {
margin-top: -15px;
height: 0;
overflow: hidden;
opacity: 0;
background-color: #fff;
transition: all .5s;
border: 2px solid #000961;
z-index: 0;
/*padding: 10px;*/
}
.accordion-check:checked~.accordion-box {
height: auto;
opacity: 1;
padding: 2rem;
text-align: left;
}
.accordion-check:checked+.accordion-label:after {
content: '-';
}
.accordion-label span{
color: #26798d;
font-size: 2rem;
}
.accordion-box span{
color: #ff7178;
font-size: 2rem;
}
.accordion-box{
font-size: 20px;
}
@media screen and (max-width:520px) {
.accordion-label {
padding: 10px;
font-size: 15px;
}
.accordion-label span, .accordion-box span{
font-size: 1.5rem;
}
}
/*241108*/
.intro_line{margin-top: 30px; width: 94%; padding-left: 3%; padding-right: 3%; padding-bottom: 30px; border-bottom: 1px solid #000; text-align: left; }
.intro_navy{margin-top: -40px; padding-top: 10px; width: 94%; padding-left: 3%; padding-right: 3%; background-color: #002854;margin-bottom: -10px;padding-bottom: 30px; }
.back_blue{background-color:#022450; padding-top: 2px; margin-top: 20px;}
.intro_wline{margin-top: 10px; width: 94%; margin-left: 3%; border-bottom: 1px solid #fff; padding-bottom: 20px; }
.intro_wline p{color: #fff; text-align: left;}
.support h2{color: #fff; margin-top: 40px;}
.support p{color: #fff;}
.int_text h2{color: #fff; font-size: 120%; margin-bottom: 20px;}
.int_text p{color: #fff; margin-bottom: 40px;}
.last_btn {float: left;}
.last_btn img{float: left; width: 48%; margin: 1%;}
.btn_ani img{
/* 諡｡螟ｧ縺吶ｋ縺ｮ縺ｫ縺九°繧区凾髢� */
transition:all 0.3s;
}
.btn_ani img:hover{
/* 繝帙ヰ繝ｼ縺励◆繧�1.2蛟阪し繧､繧ｺ縺ｫ諡｡螟ｧ */
transform: scale(1.1);
}
.faq_bg{
background-color: #CEE8F9;
padding: 20px 0;
text-align: center;
margin-top: -120px;
}
.job-box-a {
margin: 5px 5px 15px 5px;
font-weight: bold;
background: #FFF;
border-radius: 40px;
width: 46.5%;
text-align: center;
padding: 10px 0 10px 0;
border: 1px solid #000;
box-shadow: 5px 8px 0px #adb4de;
}
.job-box-a a{color: #000; text-decoration: none;}
.job-box-a a:hover{transition:all 0.3s;opacity: 0.7;}
.btn_space{width: 60%; margin: 0 auto; padding-bottom: 10px;}
@media only screen and (min-width: 1280px){
.bg_txt{ position:fixed; width: 40%;top:8%;left: 14%;
}
.bg_r{ position:fixed; width: 18%;bottom:0%;left: 5%; z-index: 1;
}
}
@media screen and (min-width:767px) and ( max-width:1280px) {
.bg_txt{ position:fixed; width: 42%;top:15%;left: 2%;
.job_btn { float: left; width: 100%; transition: 0.3s;margin-bottom: 0px; margin-left: 0%;}
}
.bg_r{ /*position:fixed; width: 150px;bottom:0%;left: 4%; z-index: 1;*/ display: none;
}
}
@media only screen and (max-width: 767px){
.bg_txt{ display: none;
}
.bg_r{ display: none;
}
}
.intro_noline .t_img{ width: 100%; height: auto;}
.faq_img{width: 94%; margin-left: 3%; margin-bottom: -20px;}
/*繝輔ャ繧ｿ繝ｼ*/
footer {
text-align: center;
margin: 0px 0;
z-index: 2;
padding-top: 10px;
border-top: 1px solid #000;
}
}
/*2603*/
/*隰帛ｺｧ*/
:root {
--primary-pink: #2f59a7;
--bg-light-pink: #f2e3e8;
--border-navy: #1a2a4d;
--text-black: #333;
}
/*body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
background-color: var(--bg-light-pink);
margin: 0;
padding: 20px 10px;
display: flex;
justify-content: center;
}*/
.container {
/*width: 100%;*/
max-width:100%; /* 繧ｹ繝槭�繧ｵ繧､繧ｺ蝓ｺ貅� */
text-align: left;
}
/* 繝倥ャ繝繝ｼ繧ｿ繧､繝医Ν */
.header-title {
background-color: var(--primary-pink);
color: white;
text-align: center;
padding: 15px;
font-size: 1.2rem;
font-weight: bold;
border-radius: 4px;
margin-bottom: 20px;
}
/* 蟄ｦ遘代�繧ｿ繝ｳ繧ｨ繝ｪ繧｢ */
.tab-menu {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: left;
margin-bottom: 35px;
text-align: left;
}
.tab-btn {
background: white;
border: 1px solid #ccc;
border-radius: 5px;
padding: 8px 12px;
font-size: 0.85rem;
cursor: pointer;
color: #666;
transition: 0.3s;
}
/* 蜷�ｭｦ遘代�濶ｲ�育判蜒上↓蝓ｺ縺･縺榊�迴ｾ�� */
.tab-btn[data-dept="hotel"] { color: #fff; background-color:#009844;font-weight:bold; }
.tab-btn[data-dept="travel"] { color: #fff; background-color: #00b8ee;font-weight:bold; }
.tab-btn[data-dept="railway"] { color: #fff; background-color: #00469b;font-weight:bold; }
.tab-btn[data-dept="airline"] { color: #fff; background-color: #00b1b2;font-weight:bold; }
.tab-btn[data-dept="bridal"] { color: #fff; background-color: #cba05b;font-weight:bold; }
.tab-btn[data-dept="korean"] { color: #fff; background-color: #b81c22;font-weight:bold; }
.tab-btn[data-dept="funeral"] { color: #fff; background-color: #6e60a7;font-weight:bold; }
.tab-btn[data-dept="tour"] { color: #fff; background-color: #e73f91;font-weight:bold; }
.tab-btn.active {
background-color: #eee;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
color: #999;
}
/* 繧ｫ繝ｼ繝峨お繝ｪ繧｢ */
.content-area {
position: relative;
}
.course-card {
display: none; /* 蛻晄悄縺ｯ髱櫁｡ｨ遉ｺ */
background: white;
/*border: 2px solid #2f59a7;*/
/* box-shadow: 蜿ｳ縺ｸ縺ｮ繧ｺ繝ｬ 荳九∈縺ｮ繧ｺ繝ｬ 縺ｼ縺九＠蜈ｷ蜷� 蠎�′繧� 濶ｲ; */
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
border-radius: 12px;
overflow: hidden;
animation: fadeIn 0.5s ease forwards;
margin-bottom:30px;
}
.course-card.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
/* 繝繝溘�逕ｻ蜒城Κ蛻� */
.image-placeholder {
background-color: #ddd;
/*height: 220px;*/
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #333;
}
.image-placeholder img {
width: 100%; /* 讓ｪ蟷��隕ｪ隕∫ｴ�縺ｫ蜷医ｏ縺帙ｋ�井ｻｻ諢擾ｼ� */
/*height: 220px; */ /* 鬮倥＆繧�220px縺ｫ蝗ｺ螳� */
object-fit: cover; /* 繧｢繧ｹ繝壹け繝域ｯ斐ｒ邯ｭ謖√＠縺溘∪縺ｾ縲∵棧縺�▲縺ｱ縺�↓繝医Μ繝溘Φ繧ｰ */
object-position: center; /* 荳ｭ螟ｮ繧貞渕貅悶↓繝医Μ繝溘Φ繧ｰ�亥ｿ�ｦ√↓蠢懊§縺ｦ隱ｿ謨ｴ�� */
}
/* 隧ｳ邏ｰ繝�く繧ｹ繝磯Κ蛻� */
.card-body {
padding: 20px;
}
/*.tags {
gap: 5px;
align-items: center;
margin-bottom: 15px;
}
.tag-dept {
border: 1px solid #ccc;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: bold;
}*/
.tags{
display:grid;
grid-template-columns:0.7fr 1.2fr 1.6fr 0.8fr;
gap:8px;
width:100%;
}
.tag-dept{
display:flex;
align-items:center;
justify-content:center;
height:38px;
padding:0 6px;
border-radius:10px;
box-sizing:border-box;
font-size:clamp(10px,2.8vw,14px);
font-weight:700;
line-height:1;
white-space:nowrap;
}
.tag-time {
display: flex;
border: 1px solid var(--primary-pink);
border-radius: 5px;
overflow: hidden;
font-size: 0.8rem;
}
.tag-time .label {
background: #2f59a7;
color: white;
padding: 4px 8px;
}
.tag-time .value {
padding: 4px 8px;
color: #333;
}
.card-title {
font-size: 1.1rem;
font-weight: bold;
line-height: 1.4;
margin-bottom: 15px;
}
.card-desc {
font-size: 0.9rem;
line-height: 1.6;
color: #444;
margin-bottom: 20px;
}
/* 逕ｳ縺苓ｾｼ縺ｿ繝懊ち繝ｳ */
.apply-btn {
display: flex;
align-items: center;
justify-content: center;
background-color: #e4007f;
color: white;
text-decoration: none;
padding: 15px;
border-radius: 30px;
font-weight: bold;
position: relative;
transition: 0.3s;
margin-top: 30px;
}
.apply-btn::after {
content: '>';
position: absolute;
right: 20px;
font-weight: normal;
}
.apply-btn:hover {
opacity: 0.8;
}
/*繝ｭ繝ｼ繝峨�繝��*/
/* 蜈ｨ菴灘ｹ�100% */
.roadmap-wrap {
width: 100%;
/*padding: 40px 16px;*/
box-sizing: border-box;
margin: 0 0;
}
/* 荳ｭ螟ｮ蝗ｺ螳壹き繝ｩ繝��医せ繝槭�縺ｧ繧ょｴｩ縺輔↑縺�ｼ� */
.roadmap {
max-width: 480px;
margin: 0 auto;
position: relative;
}
.roadmap02 {
max-width: 480px;
margin: 0 auto;
position: relative;
}
/* 繧ｿ繧､繝医Ν */
.roadmap h1 {
text-align: center;
font-size: 26px;
font-weight: 700;
margin-bottom: 32px;
}
.roadmap h1::after {
content: "";
display: block;
width: 80px;
height: 4px;
background: #2f59a7;
margin: 12px auto 0;
}
/* 邵ｦ繝ｩ繧､繝ｳ */
.roadmap::before {
content: "";
position: absolute;
left: 8px;
top: 15px; /* 01縺ｮ鮟剃ｸｸ荳ｭ蠢� */
bottom: 130px; /* 竊� 08縺ｮ鮟剃ｸｸ荳ｭ蠢�〒豁｢繧√ｋ */
width: 4px;
background: #2f59a7;
transform-origin: top; /* 荳翫°繧我ｼｸ縺ｳ繧� */
transform: scaleY(0); /* 譛蛻昴�隕九∴縺ｪ縺� */
animation: lineGrow 1.2s ease-out forwards;
}
/* 邵ｦ繝ｩ繧､繝ｳ */
.roadmap02::before {
content: "";
position: absolute;
left: 8px;
top: 295px; /* 01縺ｮ鮟剃ｸｸ荳ｭ蠢� */
bottom: 102px; /* 竊� 08縺ｮ鮟剃ｸｸ荳ｭ蠢�〒豁｢繧√ｋ */
width: 4px;
background: #2f59a7;
transform-origin: top; /* 荳翫°繧我ｼｸ縺ｳ繧� */
transform: scaleY(0); /* 譛蛻昴�隕九∴縺ｪ縺� */
animation: lineGrow 1.2s ease-out forwards;
}
/* 繧ｹ繝�ャ繝� */
.step {
position: relative;
padding-left: 37px;
margin-bottom: 40px;
}
/* 鮟剃ｸｸ */
.step::before {
content: "";
position: absolute;
left: 2px;
top: 6px;
width: 16px;
height: 16px;
background: #2f59a7;
border-radius: 50%;
opacity: 0;
transform: scale(0.5);
animation: dotAppear 0.4s ease-out forwards;
}
.step-title {
display: flex;
align-items: flex-start; /* 竊� 謾ｹ陦後＠縺ｦ繧ゆｸ頑純縺� */
gap: 10px;
margin-bottom: 12px;
}
/* 逡ｪ蜿ｷ */
.step-num {
min-width: 36px; /* 竊� 譯√ぜ繝ｬ髦ｲ豁｢ */
font-size: 24px;
font-weight: bold;
color: #2f59a7;
line-height: 1.4;
}
/* 繝�く繧ｹ繝� */
.step-text {
font-size: 18px;
font-weight: 700;
color: #000;
line-height: 1.4;
padding-top: 7px;
}
/* 隱ｬ譏弱�繝�け繧ｹ */
.box {
background: #d8edef;
padding: 15px;
border-radius: 6px;
font-size: 14px;
line-height: 1.7;
margin-bottom: 5px;
font-weight: bold;
}
/* 逕ｻ蜒丞ｮ悟�蟇�○繝懊ち繝ｳ */
.btn-oc {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 14px;
padding: 10px 18px;
min-width: 260px;
border: 2px solid #2f59a7;
border-radius: 999px;
color: #2f59a7;
text-decoration: none;
font-size: 13px;
font-weight: 700;
box-sizing: border-box;
background-color: #fff;
}
/* 蜿ｳ遏｢蜊ｰ荳ｸ */
.btn-oc span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
background: #2f59a7;
color: #fff;
border-radius: 50%;
font-size: 11px;
line-height: 1;
padding-left: 3px; padding-bottom: 2px
}
/* 邵ｦ邱壹い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
@keyframes lineGrow {
to {
transform: scaleY(1);
}
}
@keyframes dotAppear {
to {
opacity: 1;
transform: scale(1);
}
}
.step:nth-of-type(1)::before { animation-delay: 0.4s; }
.step:nth-of-type(2)::before { animation-delay: 0.7s; }
.step:nth-of-type(3)::before { animation-delay: 1.0s; }
.step:nth-of-type(4)::before { animation-delay: 1.3s; }
.step:nth-of-type(5)::before { animation-delay: 1.6s; }
.step:nth-of-type(6)::before { animation-delay: 1.9s; }
.step:nth-of-type(7)::before { animation-delay: 2.2s; }
.step:nth-of-type(8)::before { animation-delay: 2.5s; }
/**/
.job_btn{ width: 100%;margin-left: 0%; margin-top: 4%;}
.job_btn img{ float: left; margin: 2%;transition: 0.3s; width: 45%;}
.intro{margin-top: 10px; width: 94%; margin-left: 3%; background-color: #1D2086; text-align: center; }
.intro_nomargin{margin-top: 50px; width: 100%; padding-top: 0px; padding-bottom: 0px; background-color: #FFF;margin-bottom: 50px; }
.intro_noline{margin-top:50px; width: 94%;/*padding-top: 30px; */padding-left: 3%; padding-right: 3%; text-align: left; background-color: #fff;margin-bottom: 50px;}
.intro_noline_deep{margin-top:50px; width: 94%;padding-left: 3%; padding-right: 3%; text-align: left; background-color: #fff; margin-bottom:50px; }
/*.intro_noline_deep p{color: #fff;}*/
.intro_noline_deep .t_img{ width: 100%; height: auto;}
.intro_noline_deep .deep_space{margin: 10px 0px 50px 0px;}
.intro_noline_deep .deep_space02{margin: 10px 0px 10px 0px;}
.f01_title{margin-top: -100px;}
/*FAQ*/
.faq-wrapper {
max-width: 720px;
margin: 0 auto;
padding: 10px 0px 50px;
}
/* ===== 繧ｿ繧､繝医Ν ===== */
.faq-title {
color: #fff;
text-align: center;
font-size: 32px;
margin-bottom: 32px;
position: relative;
}
.faq-title::after {
content: "";
display: block;
width: 124px;
height: 3px;
background: #fff;
margin: 12px auto 0;
}
/* ===== FAQ繧ｫ繝ｼ繝� ===== */
.faq-item {
background: #f5ebdd;
border-radius: 20px;
margin-bottom: 20px;
overflow: hidden;
box-shadow: 0px 4px 8px #999;
}
/* ===== 雉ｪ蝠� ===== */
.faq-question {
display: flex;
align-items: left;
width: 100%;
border: none;
background: none;
padding: 20px;
cursor: pointer;
}
.faq-q {
font-size: 28px;
font-weight: 800;
color: #2f59a7;
margin-right: 12px;
}
.faq-question-text {
font-size: 16px;
font-weight: 700;
flex: 1;
text-align: left;
padding-top: 5px;
}
/* ===== 遏｢蜊ｰ ===== */
.faq-arrow {
margin-top: 8px;
width: 20px;
height: 20px;
background: #2f59a7;
border-radius: 50%;
position: relative;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.faq-arrow::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translate(-50%, -60%) rotate(45deg);
}
/* ===== 轤ｹ邱� ===== */
.faq-divider {
border-top: 2px dotted #333;
margin: 0 20px;
display: none; /* 縺薙％縺ｧ譛蛻昴�隕九∴縺ｪ縺上☆繧� */
}
/* ===== 蝗樒ｭ� ===== */
.faq-answer {
display: flex;
gap: 12px;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.45s ease, padding 0.45s ease;
text-align:left;
}
.faq-a {
font-size: 26px;
font-weight: bold;
color: #f5ebdd;
line-height: 1.6;
-webkit-text-stroke: 1.5px #2f59a7; /* 邵√�螟ｪ縺�(1px)縺ｨ濶ｲ(鮟�) */
}
.faq-answer-text {
font-size: 14px;
line-height: 1.8;
}
/* ===== 髢九＞縺溽憾諷� ===== */
.faq-item.active .faq-answer {
max-height: 400px;
padding: 16px 20px 20px;
}
/* ===== 髢九＞縺溽憾諷� (繧｢繧ｯ繝�ぅ繝匁凾縺ｮ縺ｿ陦ｨ遉ｺ) ===== */
.faq-item.active .faq-divider {
display: block; /* 髢九＞縺滓凾縺�縺題｡ｨ遉ｺ */
}
.faq-item.active .faq-arrow {
transform: rotate(180deg);
}
/*.sche_dash{border-top: 2px dashed #666;margin-top: 50px;}*/
/**/
/* 蜈ｨ菴楢ｨｭ螳� */
/*body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
background-color: #f4f9fb;
color: #000;
}*/
.int_container {
max-width: 480px;
margin: 0 auto;
background-color: #fff; /* 阮�ｰｴ濶ｲ縺ｮ閭梧勹 */
}
/* 繝偵�繝ｭ繝ｼ繝舌リ繝ｼ */
.hero-banner {
background-color: #67b8de;
display: flex;
align-items: center;
border-radius: 0 0 0 35px;
overflow: hidden;
color: white;
margin-top: 30px;
margin-bottom: 30px;
}
.hero-img {
width: 150px;
height: 110px;
object-fit: cover;
clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
margin-right: 10px;
}
.hero-banner h1 {
font-size: 1.45rem;
margin: 0;
line-height: 1.35;
letter-spacing: 0.02em;
}
/* 繧､繝ｳ繝医Ο繧ｫ繝ｼ繝蛾Κ蛻� */
.intro-section {
width: 94%;padding-left: 3%;
padding-bottom: 20px;
padding-top: 5px;
}
.white-card {
background: #fff;
border-radius: 15px;
padding: 12px 15px;
display: flex;
align-items: center;
margin-bottom: 12px;
}
.icon-circle-small {
width: 40px;
height: 40px;
background: #e2f4ff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
flex-shrink: 0;
}
.white-card p {
margin: 0;
font-weight: bold;
font-size: 1rem;
}
.message-text {
text-align: left;
font-size: 0.9rem;
margin-top: 25px;
line-height: 1.8;
padding: 0 5px;
}
/* 蜿ょ刈迚ｹ蜈ｸ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ */
.benefits-container {
background-color: #fff;
width: 94%;
}
.section-title-wrap {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
}
.title-flex {
display: flex;
align-items: center;
gap: 15px;
}
.icon-circle-large {
width: 55px;
height: 55px;
background: #e2f4ff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.title-flex h2 {
font-size: 1.6rem;
margin: 0;
font-weight: bold;
}
.title-underline {
width: 100px;
height: 4.5px;
background-color: #67b8de;
margin-top: 10px;
border-radius: 2px;
}
/* 迚ｹ蜈ｸ繧ｫ繝ｼ繝� */
.benefit-box {
margin-bottom: 25px;
border-radius: 12px;
overflow: hidden;
}
.benefit-head {
background-color: #d8edef;
padding: 0px 15px;
display: flex;
align-items: center;
}
.benefit-badge {
/*background-color: #3f60a9;*/
color: white;
font-weight: bold;
font-size: 2.55rem;
font-weight: bold;
padding: 6px 0px;
border-radius: 8px;
margin-right: 5px;
}
.benefit-head h3 {
margin: 0;
font-size: 1.00rem;
color: #222;
}
.head_pink{font-size: 1.25rem;
font-weight: bold;
color: #ef609a;}
.benefit-body {
background-color: #22b3e0;
color: white;
padding: 22px 20px;
font-size: 0.95rem;
line-height: 1.6;
}
.benefit-body p {
margin: 0;
color: #fff;
}
/*隕句�縺�*/
/* 隕句�縺励�繝ｩ繝�ヴ繝ｳ繧ｰ */
.section-title-wrap {
display: flex;
flex-direction: column;
align-items: center; /* 荳ｭ螟ｮ謠�∴ */
margin-bottom: 40px;
}
.title-flex {
display: flex;
align-items: baseline; /* 縺薙％縺碁㍾隕�ｼ√�繝ｼ繧ｹ繝ｩ繧､繝ｳ縺ｧ謠�∴繧� */
gap: 15px; /* 繧｢繧､繧ｳ繝ｳ縺ｨ譁�ｭ励�髢馴囈 */
}
.icon-circle-large {
width: 40px;
height: 40px;
background: #fff; /* 逋ｽ縺��蠖｢閭梧勹 */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
align-self: center; /* 繧｢繧､繧ｳ繝ｳ縺�縺代�荳ｭ螟ｮ驟咲ｽｮ */
}
/* h2隕句�縺励�繧ｹ繧ｿ繧､繝ｫ */
.main-title {
margin: 0;
font-size: 1.8rem; /* 縲御ｽ馴ｨ楢ｬ帛ｺｧ縲阪�繧ｵ繧､繧ｺ */
font-weight: bold;
display: flex;
align-items: baseline;
gap: 8px; /* 縲悟ｭｦ遘大挨縲阪→縺ｮ髢馴囈 */
}
/* 蟆上＆縺�枚蟄暦ｼ亥ｭｦ遘大挨�峨�繧ｹ繧ｿ繧､繝ｫ */
.small-text {
font-size: 1.1rem; /* 蟆上＆繧√�繧ｵ繧､繧ｺ */
font-weight: bold;
}
/* 荳狗ｷ� */
.title-underline {
width: 80px;
height: 4px;
background-color: #67b8de;
margin-top: 10px;
border-radius: 2px;
}
.title-underline02 {
width: 80px;
height: 4px;
background-color: #ef609a;
margin-top: 10px;
border-radius: 2px;
}
/* 繝懊ち繝ｳ縺ｮ繝吶�繧ｹ繧ｹ繧ｿ繧､繝ｫ */
.btn-reservation {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 10%;
background-color: #ef609a; /* 繝｡繧､繝ｳ繧ｫ繝ｩ繝ｼ */
color: #fff;
text-decoration: none;
border-radius: 100px; /* 荳ｸ縺ｿ */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: bold;
position: relative;
transition: all 0.2s ease;
width: 80%;
/* 遶倶ｽ捺─縺ｮ縺ゅｋ蠖ｱ�医�繧ｿ繝ｳ縺ｮ蜴壹∩�� */
box-shadow: 0 8px 0 #9d4669;
}
/* 繧｢繧､繧ｳ繝ｳ驛ｨ蛻� */
.btn-icon {
margin-right: 20px;
display: flex;
align-items: center;
}
.btn-icon img {
width: 40px;
height: auto;
}
/* 繝�く繧ｹ繝磯Κ蛻��荳ｦ縺ｳ */
.btn-text-container {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 15px;
}
.btn-sub-text {
font-size: 14px;
margin-bottom: 2px;
}
.btn-main-text {
font-size: 22px;
letter-spacing: 0.05em;
}
/* --- 繝帙ヰ繝ｼ�医�繧ｦ繧ｹ繧ｪ繝ｼ繝舌��画凾縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ --- */
.btn-reservation:hover {
/* 蠖ｱ繧貞ｰ上＆縺上＠縺ｦ縲∽ｽ咲ｽｮ繧剃ｸ九↓縺壹ｉ縺� */
box-shadow: 0 2px 0 #9d4669;
transform: translateY(6px);
}
/* 繧ｯ繝ｪ繝�け譎ゑｼ医＆繧峨↓蟆代＠豐医��� */
.btn-reservation:active {
box-shadow: none;
transform: translateY(8px);
}
/*蟾ｦ繝懊ち繝ｳ01*/
/* 繝懊ち繝ｳ縺ｮ繝吶�繧ｹ繧ｹ繧ｿ繧､繝ｫ */
.btn-reservation01 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10% 3% 10% 10%;
background-color: #ef609a; /* 繝｡繧､繝ｳ繧ｫ繝ｩ繝ｼ */
color: #fff;
text-decoration: none;
border-radius: 100px; /* 荳ｸ縺ｿ */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: bold;
position: relative;
transition: all 0.2s ease;
width: 80%;
/* 遶倶ｽ捺─縺ｮ縺ゅｋ蠖ｱ�医�繧ｿ繝ｳ縺ｮ蜴壹∩�� */
box-shadow: 0 8px 0 #9d4669;
}
/* 繝�く繧ｹ繝磯Κ蛻��荳ｦ縺ｳ */
.btn-text-container01 {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 15px;
}
.btn-sub-text01 {
font-size: 0.7rem;
margin-bottom: 2px;
}
.btn-main-text01 {
font-size: 1.1rem;
letter-spacing: 0.05em;
}
/* 蜿ｳ蛛ｴ縺ｮ遏｢蜊ｰ��>�� */
.btn-arrow01::after {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
position: absolute;
/*top: 50%;*/
right: 18px; /* 蜿ｳ遶ｯ縺九ｉ10px縺ｫ蝗ｺ螳� */
/*transform: translateY(-50%);*/ /* 蝙ら峩荳ｭ螟ｮ謠�∴ */
}
/* --- 繝帙ヰ繝ｼ�医�繧ｦ繧ｹ繧ｪ繝ｼ繝舌��画凾縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ --- */
.btn-reservation01:hover {
/* 蠖ｱ繧貞ｰ上＆縺上＠縺ｦ縲∽ｽ咲ｽｮ繧剃ｸ九↓縺壹ｉ縺� */
box-shadow: 0 2px 0 #9d4669;
transform: translateY(6px);
}
/* 繧ｯ繝ｪ繝�け譎ゑｼ医＆繧峨↓蟆代＠豐医��� */
.btn-reservation01:active {
box-shadow: none;
transform: translateY(8px);
}
/*蟾ｦ繝懊ち繝ｳ02*/
/* 繝懊ち繝ｳ縺ｮ繝吶�繧ｹ繧ｹ繧ｿ繧､繝ｫ */
.btn-reservation02 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10% 3% 10% 10%;
background-color: #22b3e0; /* 繝｡繧､繝ｳ繧ｫ繝ｩ繝ｼ */
color: #fff;
text-decoration: none;
border-radius: 100px; /* 荳ｸ縺ｿ */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: bold;
position: relative;
transition: all 0.2s ease;
width: 80%;
/* 遶倶ｽ捺─縺ｮ縺ゅｋ蠖ｱ�医�繧ｿ繝ｳ縺ｮ蜴壹∩�� */
box-shadow: 0 8px 0 #0c5f72;
}
/* 繝�く繧ｹ繝磯Κ蛻��荳ｦ縺ｳ */
.btn-text-container02 {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 15px;
}
.btn-sub-text02 {
font-size: 0.7rem;
margin-bottom: 2px;
}
.btn-main-text02 {
font-size: 1.1rem;
letter-spacing: 0.05em;
}
/* 蜿ｳ蛛ｴ縺ｮ遏｢蜊ｰ��>�� */
.btn-arrow02::after {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
position: absolute;
/*top: 50%;*/
right: 18px;
}
/* --- 繝帙ヰ繝ｼ�医�繧ｦ繧ｹ繧ｪ繝ｼ繝舌��画凾縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ --- */
.btn-reservation02:hover {
/* 蠖ｱ繧貞ｰ上＆縺上＠縺ｦ縲∽ｽ咲ｽｮ繧剃ｸ九↓縺壹ｉ縺� */
box-shadow: 0 2px 0 #0c5f72;
transform: translateY(6px);
}
/* 繧ｯ繝ｪ繝�け譎ゑｼ医＆繧峨↓蟆代＠豐医��� */
.btn-reservation02:active {
box-shadow: none;
transform: translateY(8px);
}
/*TOP animation*/
:root {
--speed: 0.4s; /* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ縺ｮ蝓ｺ譛ｬ騾溷ｺｦ */
}
.mv-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 蟶ｸ縺ｫ3蛻� */
gap: 1% 1%; /* 邵ｦ繝ｻ讓ｪ縺ｮ髫咎俣�茨ｼ�欠螳壹〒繝ｬ繧ｹ繝昴Φ繧ｷ繝悶↓�� */
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 10px 60px 10px;
box-sizing: border-box;
align-items: center;
}
/* 繝｡繧､繝ｳ逕ｻ蜒�(7)繧呈ｨｪ縺�▲縺ｱ縺�↓蠎�￡繧� */
.item-main {
grid-column: 1 / 4; /* 1蛻礼岼縺九ｉ3蛻礼岼縺ｾ縺ｧ縺ｶ縺｡謚懊″ */
margin-top: -4%;
margin-bottom: -13%;
position: relative;
z-index: 2;
}
/* 豺ｻ莉倡判蜒上�縲後い繝ｼ繝∫憾縲阪�髫咎俣繧貞�迴ｾ縺吶ｋ縺溘ａ縺ｮ繧ｯ繝ｪ繝���井ｻｻ諢擾ｼ� */
/* 繝｡繧､繝ｳ逕ｻ蜒上�荳贋ｸ九ｒ蟆代＠蜑翫ｋ縺ｨ縲√ｈ繧頑ｷｻ莉伜峙縺ｮ髮ｰ蝗ｲ豌励↓霑代￥縺ｪ繧翫∪縺� */
.item-main img {
width: 75%;
margin: 0 auto;
height: auto;
aspect-ratio: 20 / 8.2; /* 繝｡繧､繝ｳ縺ｯ縺九↑繧頑ｨｪ髟ｷ */
object-fit: cover;
display: block;
}
.item img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1.2; /* 荳贋ｸ九�蟆冗判蜒上�豁｣譁ｹ蠖｢縲�4:3縺�縺ｨ蜿弱∪繧翫′濶ｯ縺�〒縺� */
object-fit: cover;
display: block;
border-radius: 4px;
z-index: 1;
}
/* --- 繝繧､繝翫Α繝�け繝ｻ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ --- */
@keyframes fastPop {
0% {
opacity: 0;
transform: scale(0.8) translateY(20px);
filter: brightness(1.5) blur(5px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
filter: brightness(1) blur(0);
}
}
.item, .item-main {
opacity: 0;
animation: fastPop var(--speed) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* 辷�溷�迴ｾ繧ｹ繧ｱ繧ｸ繝･繝ｼ繝ｫ (0.08遘貞綾縺ｿ) */
.item-1 { animation-delay: 0.1s; }
.item-2 { animation-delay: 0.18s; }
.item-3 { animation-delay: 0.26s; }
.item-4 { animation-delay: 0.34s; }
.item-5 { animation-delay: 0.42s; }
.item-6 { animation-delay: 0.5s; }
.item-7 {
animation-delay: 0.65s;
animation-duration: 0.6s;
animation-timing-function: ease-out;
}
/**/
.tab_inner{width: 49%; float: left; margin: 0.5%;}
.access_tit{color: #2f59a7; font-size: 105%;}
/* ===== 繝ｬ繧ｹ繝昴Φ繧ｷ繝� ===== */
@media (max-width: 480px) {
.faq-item {
background: #fff;
border-radius: 15px;
margin-bottom: 15px;
overflow: hidden;
}
.faq-question-text {
font-size: 15px;
font-weight: 700;
flex: 1;
text-align: left;
padding-top: 10px;
padding-bottom: 5px;
}
.faq-answer-text {
font-size: 14px;
line-height: 1.8;
}
.faq-question {
display: flex;
align-items: left;
width: 100%;
border: none;
background: none;
padding: 10px;
cursor: pointer;
}
.faq-item.active .faq-answer {
max-height: 400px;
padding: 13px 15px 15px;
}
/* 繝懊ち繝ｳ縺ｮ繝吶�繧ｹ繧ｹ繧ｿ繧､繝ｫ */
.btn-reservation {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 10%;
background-color: #db6b97; /* 繝｡繧､繝ｳ繧ｫ繝ｩ繝ｼ */
color: #fff;
text-decoration: none;
border-radius: 100px; /* 荳ｸ縺ｿ */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: bold;
position: relative;
transition: all 0.2s ease;
width: 80%;
/* 遶倶ｽ捺─縺ｮ縺ゅｋ蠖ｱ�医�繧ｿ繝ｳ縺ｮ蜴壹∩�� */
box-shadow: 0 8px 0 #9d4669;
}
/* 繧｢繧､繧ｳ繝ｳ驛ｨ蛻� */
.btn-icon {
margin-right: 20px;
display: flex;
align-items: center;
}
.btn-icon img {
width: 40px;
height: auto;
}
/* 繝�く繧ｹ繝磯Κ蛻��荳ｦ縺ｳ */
.btn-text-container {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 15px;
}
.btn-sub-text {
font-size: 12px;
margin-bottom: 2px;
}
.btn-main-text {
font-size: 20px;
letter-spacing: 0.05em;
}
}
@media screen and (min-width:767px) and ( max-width:1280px) {
.tab_inner{width: 100%; float: left; margin: 0%;}
.btn-reservation01 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5% 3% 5% 10%;
background-color: #db6b97; /* 繝｡繧､繝ｳ繧ｫ繝ｩ繝ｼ */
color: #fff;
text-decoration: none;
border-radius: 100px; /* 荳ｸ縺ｿ */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: bold;
position: relative;
transition: all 0.2s ease;
width: 80%;
/* 遶倶ｽ捺─縺ｮ縺ゅｋ蠖ｱ�医�繧ｿ繝ｳ縺ｮ蜴壹∩�� */
box-shadow: 0 8px 0 #9d4669;
margin-bottom: 20px;
}
.btn-reservation02 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5% 3% 5% 10%;
background-color: #22b3e0; /* 繝｡繧､繝ｳ繧ｫ繝ｩ繝ｼ */
color: #fff;
text-decoration: none;
border-radius: 100px; /* 荳ｸ縺ｿ */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: bold;
position: relative;
transition: all 0.2s ease;
width: 80%;
/* 遶倶ｽ捺─縺ｮ縺ゅｋ蠖ｱ�医�繧ｿ繝ｳ縺ｮ蜴壹∩�� */
box-shadow: 0 8px 0 #0c5f72;
}
}
/*.icons{padding-top: 10px;}*/
.icons img{height:28px;width: auto;/*margin-right: 10px;float: left;margin-bottom: 20px;*/}
.mori{font-weight: bold; margin-bottom: 30px; font-size: 85%;text-align: center;line-height: 160%;margin-top: 5px; color: #fff;}
/*==========================
Section
==========================*/
.lp-section{
position:relative;
max-width:480px;
margin-top: -10px;
padding:50px 15px 20px;
overflow:visible;
}
/*--------------------
閭梧勹
--------------------*/
.lp-section--blue{
background:#081d37;
}
.lp-section--white{
background:#fff;
}
/*--------------------
荳贋ｸ狗せ邱�
--------------------*/
.lp-section::before,
.lp-section::after{
content:"";
position:absolute;
left:0;
width:100%;
}
.lp-section::before{
top:0;
}
.lp-section::after{
bottom:0;
}
/*--------------------
繧ｿ繧､繝医Ν蜈ｨ菴�
--------------------*/
.lp-section__heading{
position:absolute;
top:-40px;
left:50%;
transform:translateX(-50%);
display:flex;
align-items:center;
z-index:5;
}
/*--------------------
繧｢繧､繧ｳ繝ｳ荳ｸ
--------------------*/
.lp-section__icon{
width:58px;
height:58px;
border-radius:50%;
border:3px solid #16ace5;
background:#cfcfcf;
flex-shrink:0;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
position:relative;
z-index:2;
}
.lp-section__icon img{
width:100%;
height:100%;
object-fit:cover;
}
/*--------------------
繧ｿ繧､繝医Ν
--------------------*/
.lp-section__title{
margin-left:-56px;
background:#12aee8;
color:#fff;
border-radius:999px;
min-height:50px;
padding:15px 34px 0 70px;
display:flex;
align-items:center;
justify-content:center;
white-space:nowrap;
font-size: 1.5rem;
font-weight: bold;
display: flex;
align-items: baseline;
gap: 8px;
font-weight:700;
letter-spacing:.02em;
}
/*--------------------
繧ｳ繝ｳ繝�Φ繝�
--------------------*/
.lp-section__content{
min-height:260px;
background:#ddd;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
}
.small-text {
font-size: 1.1rem;
font-weight: bold;
}
.title{
font-size: 1.6rem;
font-weight: 900;
line-height: 1.25;
color: #221515;
margin-bottom: 20px;
}
.marker{
color: #e50012;
}
.card-body p{padding-left: 10px;
margin-top: 0;
margin-bottom: 5px;
margin-right: -12px;}
.point-list{
max-width:480px;
margin:0;
padding:0;
list-style:none;
}
.point-list li{
display:grid;
grid-template-columns: 10px 1fr;
column-gap:12px;
align-items:start;
margin-bottom:10px;
}
.point-list li:last-child{
margin-bottom:0;
}
.point-list .num{
color:#23278f;
font-size:1rem;
font-weight:700;
line-height:1.8;
text-align:center;
}
.point-list .text{
color:#23278f;
font-size:1rem;
font-weight:200;
line-height:1.8;
letter-spacing:.02em;
}
.point-list .num02{
color:#00b1b2;
font-size:1rem;
font-weight:700;
line-height:1.8;
text-align:center;
}
.point-list .text02{
color:#00b1b2;
font-size:1rem;
font-weight:200;
line-height:1.8;
letter-spacing:.02em;
}
/*=========================
莠､騾夊ｲｻ繧ｵ繝昴�繝�
=========================*/
.gift-support{
background:#d8ebff;
padding:0;
margin-bottom: 30px;
}
.gift-support__inner{
width:100%;
max-width:480px;
margin:auto;
padding:0 0;
box-sizing:border-box;
}
/*-------------------------
荳企Κ
-------------------------*/
.gift-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:20px;
margin-top: 0;
}
.gift-copy{
width:70%;
}
.gift-copy p{
font-size:17px;
/*font-weight:700;*/
line-height:1.4;
color:#111;
margin:0;
}
.gift-copy h2{
margin:8px 0;
font-size:0;
}
.gift-copy h2 span{
font-size:24px;
font-weight:900;
color:#000;
background:linear-gradient(
transparent 62%,
#ffe600 62%
);
padding:0 .1em;
}
.gift-icon{
width:27%;
flex-shrink:0;
padding-right: 1%;
}
.gift-icon img{
width:100%;
display:block;
}
/*-------------------------
逕ｻ蜒�
-------------------------*/
.gift-mainimg{
margin-bottom:38px;
}
.gift-mainimg img{
width:100%;
display:block;
}
/*-------------------------
繧ｫ繝ｼ繝�
-------------------------*/
.gift-card{
background:#fff;
border-radius:20px;
padding:15px 20px 30px;
box-shadow:
0 8px 18px rgba(0,0,0,.18);
}
.gift-card a{color: #000;text-decoration: underline;}
.gift-card a:hover{text-decoration: none;}
/*-------------------------*/
.gift-card-title{
color:#ec008c;
font-size:16px;
font-weight:900;
line-height:1.60;
margin:0 0 0px;
}
.gift-card-text{
font-size:16px;
font-weight:700;
line-height:1.6;
color:#111;
margin:0 0 24px;
}
.gift-card-image{
margin-bottom:5px;
}
.gift-card-image img{
width:100%;
display:block;
}
.gift-note{
font-size:11px;
color:#333;
margin-bottom:40px;
margin-top: 0;
}
/*-------------------------
LINE
-------------------------*/
.gift-line-title{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin-bottom:0px;
}
.gift-line-title h3{
margin-top: 10px;
font-size:20px;
font-weight:900;
color:#111;
text-align:center;
line-height: 150%;
}
.gift-line-title span{
width:22px;
height:2px;
background:#222;
position:relative;
transform:rotate(55deg);
}
.gift-line-title span:last-child{
transform:rotate(-55deg);
}
.gift-line-image{
width:58%;
margin:auto;
}
.gift-line-image img{
width:100%;
display:block;
}
.gift-line-image a:hover{transition:all 0.3s;opacity: 0.7;}
/* ==========================
ACCESS
========================== */
.access{margin: 0;
padding-bottom: 20px;
}
.access__inner{
width:100%;
max-width:480px;
margin:auto;
padding:0;
box-sizing:border-box;
}
/* GoogleMap */
.access__map{
width:100%;
aspect-ratio:16 / 10;
background:#cfcfcf;
display:flex;
justify-content:center;
align-items:center;
font-size:26px;
color:#222;
margin-bottom:36px;
}
/* 蜷���岼 */
.access__item{
margin-top:25px;
margin-bottom: 0;
}
/* 髱偵Λ繝吶Ν */
.access__label{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 15px;
background:#2f58b3;
border-radius:14px;
color:#fff;
font-size:18px;
font-weight:700;
line-height:1;
margin-bottom:13px;
white-space:nowrap;
}
.access__label--long{
padding:0 15px;
font-size:18px;
}
/* 隱ｬ譏取枚 */
.access__item p{
margin:0;
color:#111;
font-size:16px;
font-weight:700;
line-height:1.7;
letter-spacing:.02em;
}
/* 荳矩Κ蝗ｺ螳壹ヰ繝翫� */
/* 隕ｪ隕∫ｴ� */
.fixed-entry-banner {
position: fixed;
bottom: 0;
/* .lp 縺ｫ蜷医ｏ縺帙ｋ */
width: clamp(402px, 35vw, 1280px);
max-width: 482px;
left: 65.5vw;
padding: 0.5% 0.5% 0.5% 0.5%;
box-sizing: border-box;
border-left: 1px solid #cba46b;
border-right: 1px solid #cba46b;
z-index: 9999;
background-color: #1c5384;
}
/* hover */
.fixed-entry-banner a:hover {
opacity: 0.8;
}
/*=========================
Fixed CTA
=========================*/
.floating-cta{
position:fixed;
left:50%;
bottom:0;
transform:translateX(-50%);
width:100%;
max-width:480px;
background:#e6007e;
padding:12px 18px calc(12px + env(safe-area-inset-bottom));
box-sizing:border-box;
z-index:9999;
}
/* 繝懊ち繝ｳ */
.floating-cta__button{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:64px;
border-radius:999px;
overflow:hidden;
text-decoration:none;
background: linear-gradient(
105deg,
#ff3e49 0%,
#f73575 53%,
#e941a0 100%
);
}
.fixed-entry-banner a:hover{transition:all 0.3s;opacity: 0.7;}
/* 繧ｭ繝ｩ繝� */
.floating-cta__button::before{
content:"";
position:absolute;
top:-120%;
left:-45%;
width:70px;
height:260%;
background:linear-gradient(
90deg,
rgba(255,255,255,0),
rgba(255,255,255,.85),
rgba(255,255,255,0)
);
transform:rotate(28deg);
animation:shine 2.8s infinite;
}
/* 繝�く繧ｹ繝� */
.floating-cta__text{
font-size:24px;
font-weight:900;
color:#fff;
letter-spacing:.05em;
}
/* 遏｢蜊ｰ */
.floating-cta__arrow{
position:absolute;
right:28px;
font-size:46px;
font-weight:300;
color:#fff;
line-height:1;
padding-bottom: 8px;
}
/* 蜈峨い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
@keyframes shine{
0%{
left:-45%;
opacity:0;
}
8%{
opacity:1;
}
28%{
left:125%;
opacity:1;
}
35%{
opacity:0;
}
100%{
left:125%;
opacity:0;
}
}
@media screen and (max-width: 768px) {
.fixed-entry-banner{
width: 100%;
left: 0;
max-width: 100%;
border: 0;
padding: 2% 2% 2% 2%;
box-sizing: border-box;
background-color: #1c5384;
}
/*.fixed-entry-banner a {
height: 52px;
gap: 10px;
}
.fixed-entry-banner .text {
font-size: 22px;
font-weight: bold;
}
.fixed-entry-banner .circle-arrow {
width: 24px;
height: 24px;
}*/
}
@media screen and (max-width:1280px) and (min-width:767px){
.fixed-entry-banner{
width: clamp(402px, 45vw, 767px);
max-width: 482px;
left: 45.5vw;
background-color: #e4007f;
}
}
/*=========================
SP
=========================*/
@media (max-width:480px){
.title{
font-size: 1.7rem;
font-weight: 900;
line-height: 1.25;
color: #221515;
margin-bottom: 20px;
}
.floating-cta{
padding:10px 16px calc(10px + env(safe-area-inset-bottom));
}
.floating-cta__button{
height:68px;
}
.floating-cta__text{
font-size:22px;
}
.floating-cta__arrow{
right:24px;
font-size:42px;
}
}
/*=========================
繧ｹ繝槭�
=========================*/
@media(max-width:480px){
.gift-copy{
width:67%;
}
.gift-copy p{
font-size:15px;
line-height: 1.4;
}
.gift-copy h2 span{
font-size:19px;
line-height: 1.3;
}
.gift-icon{
width:23%;
}
.gift-card{
padding:10px 16px 28px;
}
.gift-card a{color: #000;text-decoration: underline;}
.gift-card a:hover{text-decoration: none;}
.gift-card-title{
font-size:16px;
}
.gift-card-text{
font-size:16px;
}
.gift-line-title h3{
font-size:18px;
}
.gift-line-image{
width:60%;
}
/* 髱偵Λ繝吶Ν */
.access__label{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 15px;
background:#2f58b3;
border-radius:14px;
color:#fff;
font-size:16px;
font-weight:700;
line-height:1;
margin-bottom:18px;
white-space:nowrap;
}
.access__label--long{
padding:0 15px;
font-size:16px;
}
/* 隱ｬ譏取枚 */
.access__item p{
margin:0;
color:#111;
font-size:14px;
font-weight:700;
line-height:1.7;
letter-spacing:.03em;
}
}
/*==========================
SP
==========================*/
@media screen and (max-width:480px){
.tags {
*display: flex;
gap: 4px;
align-items: center;
margin-bottom: 15px;
}
.tag-dept {
border: 1px solid #ccc;
padding: 6px 9px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: bold;
}
/* 邵ｦ繝ｩ繧､繝ｳ */
.roadmap::before {
content: "";
position: absolute;
left: 8px;
top: 15px; /* 01縺ｮ鮟剃ｸｸ荳ｭ蠢� */
bottom: 150px; /* 竊� 08縺ｮ鮟剃ｸｸ荳ｭ蠢�〒豁｢繧√ｋ */
width: 4px;
background: #2f59a7;
transform-origin: top; /* 荳翫°繧我ｼｸ縺ｳ繧� */
transform: scaleY(0); /* 譛蛻昴�隕九∴縺ｪ縺� */
animation: lineGrow 1.2s ease-out forwards;
}
.lp-section{
padding:53px 16px 52px;
}
.lp-section__heading{
top:-30px;
}
.lp-section__icon{
width:47px;
height:47px;
}
.lp-section__title{
min-height:40px;
margin-left:-54px;
padding:12px 34px 2px 70px;
display:flex;
align-items:center;
justify-content:center;
white-space:nowrap;
font-size: 1.4rem;
font-weight: bold;
display: flex;
align-items: baseline;
gap: 8px;
font-weight:700;
letter-spacing:.02em;
}
.lp-section__content{
min-height:250px;
}
}
/*** 髮ｪ邇会ｼ亥�騾夲ｼ� ***/
.snows div {
position: fixed;
/*逕ｻ髱｢蝗ｺ螳�*/
top: -250px;
/*蛻晄悄菴咲ｽｮ*/
left: 0;
border-radius: 50%;
/*荳ｸ蝙�*/
background: #fff;
/*髮ｪ縺ｮ濶ｲ*/
opacity: 0.9;
/*闍･蟷ｲ騾乗�縺ｫ*/
}
/*** 蟆上＆縺�妛邇� ***/
.snows div:nth-child(1) {
width: 10px;
height: 10px;
filter: blur(2px);
/*縺ｼ縺九＠*/
/* ﾂｱ240px縺ｮ遽�峇縺ｧ蠖ｱ(隍�｣ｽ)繧剃ｽ懊ｋ */
box-shadow:
5vw -40px 0 #fff,
10vw 150px #fff,
15vw -230px #fff,
22vw 240px #fff,
30vw 120px #fff,
35vw -180px #fff,
44vw 240px #fff,
50vw 0 #fff,
60vw 180px #fff,
68vw 40px #fff,
74vw -130px #fff,
81vw -240px #fff,
88vw 100px #fff,
95vw 60px #fff;
animation: fall 12s linear infinite;
/*關ｽ荳�*/
}
/*** 蟆上＆縺�妛邇�2 ***/
.snows div:nth-child(2) {
width: 10px;
height: 10px;
filter: blur(2px);
/*縺ｼ縺九＠*/
/* ﾂｱ240px縺ｮ遽�峇縺ｧ蠖ｱ(隍�｣ｽ)繧剃ｽ懊ｋ */
box-shadow:
7vw 220px 0 #fff,
35vw 20px #fff,
68vw 100px #fff,
93vw -190px #fff;
animation: fall 12.5s linear infinite;
/*關ｽ荳�*/
animation-delay: 6s;
/*髢句ｧ矩≦蟒ｶ*/
}
/*** 荳ｭ縺舌ｉ縺��髮ｪ邇� ***/
.snows div:nth-child(3) {
width: 14px;
height: 14px;
filter: blur(3px);
/*縺ｼ縺九＠*/
/* ﾂｱ233px縺ｮ遽�峇縺ｧ蠖ｱ(隍�｣ｽ)繧剃ｽ懊ｋ */
box-shadow:
12vw 5px 0 #fff,
32vw -100px #fff,
45vw -180px #fff,
68vw 40px #fff,
77vw 65px #fff,
94vw 230px #fff;
animation: fall 10s linear infinite;
/*關ｽ荳�*/
animation-delay: 6s;
/*髢句ｧ矩≦蟒ｶ*/
}
/*** 螟ｧ縺阪ａ縺ｮ髮ｪ邇� ***/
.snows div:nth-child(4) {
width: 20px;
height: 20px;
filter: blur(8px);
/*縺ｼ縺九＠*/
/* ﾂｱ222px縺ｮ遽�峇縺ｧ蠖ｱ(隍�｣ｽ)繧剃ｽ懊ｋ */
box-shadow:
40vw -200px #fff,
80vw 220px #fff;
animation: fall 7s linear infinite;
/*關ｽ荳�*/
animation-delay: 4s;
/*驕�ｻｶ*/
}
/*** 關ｽ荳九い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ ***/
@keyframes fall {
0% {
top: -250px;
}
100% {
top: calc(100% + 250px);
}
}
/*261104*/
/* 全体のコンテナ */
.cv-hero-container {
position: relative;
width: 100%;
max-width: 480px;
margin: 0 auto;
line-height: 0;
overflow: hidden;
}
/* ベース画像 */
.cv-hero-main-image {
display: block;
width: 100%;
height: auto;
}
/* CVボタンの配置 */
.cv-hero-button {
position: absolute;
left: 50%;
bottom: 7%;
display: block;
width: 51%;
transform: translateX(-50%);
z-index: 10;
/* 拡大アニメーション */
animation: cv-hero-pulse 2.4s ease-in-out infinite;
/* タップ時の挙動 */
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* CVボタン画像 */
.cv-hero-button-image {
display: block;
width: 100%;
height: auto;
border: none;
}
/* ふんわり拡大・縮小 */
@keyframes cv-hero-pulse {
0%, 100% {
transform: translateX(-50%) scale(1);
}
50% {
transform: translateX(-50%) scale(1.06);
}
}
/* 斜めに光が走る */
@keyframes cv-hero-shine {
0%, 15% {
left: -80%;
opacity: 0;
}
20% {
opacity: 1;
}
45% {
left: 140%;
opacity: 1;
}
50%, 100% {
left: 140%;
opacity: 0;
}
}
/* 動きを減らす設定が有効な環境では停止 */
@media (prefers-reduced-motion: reduce) {
.cv-hero-button,
.cv-hero-button::after {
animation: none;
}
}
/* ==========================
ドリームキャンパス CVボタン
========================== */
.dream-cv {
width: 100%;
margin: 0 auto;
box-sizing: border-box;
font-family: inherit;
}
/* 上部の見出し */
.dream-cv .dream-cv__heading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0 0 10px;
padding: 0 5px;
color: #fff;
font-size: 1.1rem;
font-weight: 800;
line-height: 1.3;
text-align: center;
white-space: nowrap;
}
.dream-cv .dream-cv__heading span {
font-weight: 400;
flex-shrink: 0;
}
/* CVボタン本体 */
.dream-cv .dream-cv__button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
width: 100%;
min-height: 90px;
padding: 24px 5%;
box-sizing: border-box;
color: #fff;
text-decoration: none;
text-align: center;
background: linear-gradient(
105deg,
#ff3e49 0%,
#f73575 53%,
#e941a0 100%
);
border-radius: 100px;
border: none;
/* 下側の立体的な影 */
box-shadow: 0 8px 0 #b51c27;
overflow: hidden;
isolation: isolate;
transform: translateY(0);
transition:
transform 0.16s ease,
box-shadow 0.16s ease,
filter 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
/* キラリ演出 */
.dream-cv .dream-cv__button::before {
content: "";
position: absolute;
z-index: 2;
top: -50%;
left: -75%;
width: 42%;
height: 200%;
background: linear-gradient(
110deg,
transparent 0%,
rgba(255, 255, 255, 0.05) 30%,
rgba(255, 255, 255, 0.65) 50%,
rgba(255, 255, 255, 0.08) 70%,
transparent 100%
);
transform: skewX(-22deg);
pointer-events: none;
animation: dream-cv-shine 3.2s ease-in-out infinite;
}
/* テキストと画像をキラリ演出より前面に */
.dream-cv .dream-cv__image,
.dream-cv .dream-cv__text {
position: relative;
z-index: 3;
}
/* 画像部分：添付画像のグレーの仮画像 */
.dream-cv .dream-cv__image {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
width: 30px;
height: 30px;
}
.dream-cv .dream-cv__image img {width: 100%;height: auto;}
/* 文字エリア */
.dream-cv .dream-cv__text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
gap: 5px;
line-height: 1.3;
}
/* メインタイトル */
.dream-cv .dream-cv__title {
display: block;
font-size:1.3rem;
font-weight: 800;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* 日付・予約テキスト */
.dream-cv .dream-cv__date {
display: block;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* hover：押し込まれる動き */
@media (hover: hover) and (pointer: fine) {
.dream-cv .dream-cv__button:hover {
transform: translateY(6px);
box-shadow: 0 2px 0 #b51c27;
filter: brightness(1.04);
}
}
/* クリック・タップ時 */
.dream-cv .dream-cv__button:active {
transform: translateY(8px);
box-shadow: 0 0 0 #b51c27;
}
/* キラリが左から右へ通過 */
@keyframes dream-cv-shine {
0%, 55% {
left: -75%;
}
100% {
left: 135%;
}
}
/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion: reduce) {
.dream-cv .dream-cv__button::before {
animation: none;
}
.dream-cv .dream-cv__button {
transition: none;
}
}
/* スマートフォン */
@media screen and (max-width: 480px) {
.dream-cv .dream-cv__heading {
gap: 5px;
margin-bottom: 8px;
font-size: clamp(13px, 3.5vw, 17px);
}
.dream-cv .dream-cv__button {
min-height: 112px;
gap: 10px;
padding: 20px 4%;
border-radius: 100px;
box-shadow: 0 6px 0 #b51c27;
}
.dream-cv .dream-cv__image {
flex-basis: 30px;
width: 30px;
height: 30px;
font-size: 12px;
flex: 0 0 24px;
}
.dream-cv .dream-cv__text {
gap: 5px;
}
.dream-cv .dream-cv__title {
font-size: 1.1rem;
letter-spacing: 0;
}
.dream-cv .dream-cv__date {
font-size: 1.1rem;
letter-spacing: 0;
}
}
/* ========================================
特典紹介LP
最大幅480px・レスポンシブ対応
基準デザイン：700 × 1713
======================================== */
.school-benefits-lp {
width: 100%;
max-width: 480px;
margin: 0 auto;
overflow: hidden;
background: #062b53;
box-sizing: border-box;
line-height: 1.5;
padding-bottom: 80px;
}
.school-benefits-lp *,
.school-benefits-lp *::before,
.school-benefits-lp *::after {
box-sizing: border-box;
}
/* ========================================
全体キャンバス
======================================== */
.school-benefits-lp .sblp-canvas {
position: relative;
width: 100%;
aspect-ratio: 750 / 1713;
container-type: inline-size;
/*overflow: hidden;*/
background: #062b53;
}
/* ========================================
カード共通
背景と枠線はSVGで描画
画像のはみ出しを許可
======================================== */
.school-benefits-lp .sblp-card {
position: absolute;
left: 3.14%;
width: 93.72%;
overflow: visible;
background: transparent;
border: none;
border-radius: 0;
}
/* 以前の疑似要素装飾を無効化 */
.school-benefits-lp .sblp-card::before {
content: none;
}
/* カード配置 */
.school-benefits-lp .sblp-card-1 {
top: 4.73%;
height: 26.68%;
}
.school-benefits-lp .sblp-card-2 {
top: 34.79%;
height: 26.62%;
}
.school-benefits-lp .sblp-card-3 {
top: 64.85%;
height: 31.46%;
}
/* ========================================
SVGフレーム
背景色＋凹んだゴールド枠
======================================== */
.school-benefits-lp .sblp-frame {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
z-index: 1;
overflow: visible;
pointer-events: none;
}
/* SVG内部の塗りと枠線 */
.school-benefits-lp .sblp-frame path {
fill: #091e39;
stroke: #e5d39c;
stroke-width: 2;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
/* ========================================
画像共通
======================================== */
.school-benefits-lp .sblp-image {
position: absolute;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.school-benefits-lp .sblp-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* 画像未設定時 */
.school-benefits-lp .sblp-image img[src=""],
.school-benefits-lp .sblp-image img:not([src]) {
display: none;
}
/* 仮画像ラベル */
.school-benefits-lp .sblp-image::after {
content: "画像";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #080808;
font-size: 5.1cqw;
font-weight: 400;
pointer-events: none;
}
/* 実画像が設定されていればラベルを消す */
.school-benefits-lp
.sblp-image:has(img[src]:not([src=""]))::after {
display: none;
}
/* ========================================
テキスト共通
======================================== */
.school-benefits-lp .sblp-text {
position: absolute;
z-index: 2;
left: 6%;
width: 88%;
color: #fff;
font-size: 3.65cqw;
font-weight: 700;
line-height: 1.8;
text-align: center;
overflow-wrap: normal;
}
/* ========================================
1つ目のカード
======================================== */
/* 上部中央タイトル画像 */
.school-benefits-lp .sblp-img-title-1 {
left: 33.86%;
top: -4.16%;
width: 33.39%;
height: 16.19%;
}
/* 右上の装飾画像 */
.school-benefits-lp .sblp-img-icon-1 {
left: 72.87%;
top: -7.66%;
width: 12.96%;
height: 15.75%;
}
/* メイン画像 */
.school-benefits-lp .sblp-img-main-1 {
left: 7.62%;
top: 19.91%;
width: 84.30%;
height: 27.79%;
}
/* 説明文 */
.school-benefits-lp .sblp-text-1 {
top: 58%;
}
/* 右下の装飾画像 */
.school-benefits-lp .sblp-img-badge-1 {
left: 72.56%;
top: 77.24%;
width: 19.05%;
height: 15.75%;
}
/* ========================================
2つ目のカード
======================================== */
/* 左上の装飾画像 */
.school-benefits-lp .sblp-img-icon-2 {
left: 9%;
top: -8.55%;
width: 12.80%;
height: 15.79%;
}
/* 上部中央タイトル画像 */
.school-benefits-lp .sblp-img-title-2 {
left: 33.86%;
top: -3.73%;
width: 33.39%;
height: 16.45%;
}
/* メイン画像 */
.school-benefits-lp .sblp-img-main-2 {
left: 7.62%;
top: 20.61%;
width: 84.30%;
height: 27.79%;
}
/* 説明文 */
.school-benefits-lp .sblp-text-2 {
top: 58.2%;
font-size: 3.55cqw;
line-height: 1.8;
}
/* 右下の装飾画像 */
.school-benefits-lp .sblp-img-badge-2 {
left: 72.56%;
top: 78.29%;
width: 19.05%;
height: 15.79%;
}
/* ========================================
3つ目のカード
======================================== */
/* 上部中央タイトル画像 */
.school-benefits-lp .sblp-img-title-3 {
left: 33.86%;
top: -3.1%;
width: 33.39%;
height: 13.95%;
}
/* 右上の装飾画像 */
.school-benefits-lp .sblp-img-icon-3 {
left: 69.36%;
top: -7.22%;
width: 15.24%;
height: 15.77%;
}
/* メイン画像 */
.school-benefits-lp .sblp-img-main-3 {
left: 7.62%;
top: 17.48%;
width: 84.30%;
height: 11.49%;
}
/* 上段の説明文 */
.school-benefits-lp .sblp-text-3a {
top: 34%;
font-size: 3.55cqw;
line-height: 1.8;
}
/* 下段の説明文 */
.school-benefits-lp .sblp-text-3b {
top: 57%;
font-size: 3.45cqw;
line-height: 1.8;
}
/* 右下の装飾画像 */
.school-benefits-lp .sblp-img-badge-3 {
left: 72.56%;
top: 81.2%;
width: 19.05%;
height: 15.1%;
}
#benefit,
#section02,
#section03 {
scroll-margin-top: 80px;
}
.lp-section__head{position:absolute;
top:-40px;
left:0%;
width: 100%;
display:flex;
align-items:center;
z-index:5;}
.obi{margin-top: -5px;;padding: 0;}
.icons{width: 100%; float: left;}
.icons img{height:32px;width: auto;margin-right: 10px;float: left;margin-bottom: 20px;}
@media screen and (max-width:767px) {
.lp-section__head{position:absolute;
top:-35px;
left:0%;
width: 100%;
display:flex;
align-items:center;
z-index:5;}
.intro_navy{margin-top: -40px; padding-top: 10px; width: 94%; padding-left: 3%; padding-right: 3%; background-color: #002854;margin-bottom: -10px;padding-bottom: 10px; }
.lp-section{
padding:53px 16px 10px;
}
.acc_space{margin-top: -20px;}
.acc_space02{margin-bottom:50px;}
}