@charset "utf-8";
/*-----------------------------------------------------
Reset
----------------------------------------------------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul { list-style: none; line-height: 1.5; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; }
img { max-width: 100%; width: 100%; height: auto; vertical-align: top; image-rendering: -webkit-optimize-contrast; }

* { min-height: 0; min-width: 0; }

html { scroll-behavior: smooth; }
body { line-height: 1; margin: 0; padding: 0; height: 100%; font-family: "M PLUS 1p", sans-serif; letter-spacing : 0.1em; color: #754c24; }
a {	text-decoration: none; color: inherit; transition: 0.3s ease-in-out; }
@media (min-width: 1025px) {
	a[href*="tel:"] { pointer-events: none; cursor: default; text-decoration: none;}
}
p , div { text-align: justify; }
p:not(.footerMainMenu__textItem) { font-family: "M PLUS 1p", sans-serif; letter-spacing: .02em; }
button { margin: 0; padding: 0; outline: 0; border: 0; border-radius: 0; color: inherit; vertical-align: middle; text-align: inherit;font: inherit; -webkit-appearance: none; appearance: none; }
picture { display: block; }
p.small { font-size: 1.1rem; line-height: 20px; }

.pc { display: block; }
.sp { display: none; }
/*[data-color="green"]{ color: #009C7C; }*/
[data-size="w1200"]{ max-width: 1200px; width: 90%; margin: 0 auto; }
[data-size="w1600"]{ max-width: 1600px; width: 90%; margin: 0 auto; position: relative;  }
:root {
  --green:#009C7C;
}

/*original*/
.contentArea { position: relative; background-color: #0255A7!important; z-index: 1!important; }
main { z-index: -1; position: relative; overflow: hidden; }
body.no_scroll{ overflow: hidden; }

/*hawaii LP*/
#Kv { position: relative; width: 100%; height: 100vh; background: url("../img/hawaii_kv.png") no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; overflow: hidden; background-position: center; }
#Kv .kv_inner { max-width: 700px; width: 80%; }
#Kv .kv_inner .kv_copy_end { opacity: 0; }

/*スライド*/
#Slider { padding-top: 10px; }
#Slider img { width: 100%;; }

/*コンテンツ領域*/
.container { background: #FFEF00; }
.contents { padding: 8%; box-sizing: border-box; }
.contents_wrapper { position: relative; padding: 7%; background: #fff; border-radius: 40px; }
img.flower { position: absolute; max-width: 300px; width: 28%; top: -1%; left: -7%; z-index: 1; }

.top_copy { position: relative; margin-bottom: 40px; background: url("../img/hawaii_star.gif") no-repeat; background-size: contain; background-position: top; }
.top_copy .contents_copy { max-width: 980px; width: 100%; margin: 0 auto; }
.present_wrap { margin-bottom: 80px; }
.present_wrap h2 picture { margin-bottom: 20px; }
.present_wrap p.small { text-align: center; }

/*共通*/
article:not(:last-child) { margin-bottom: 80px; }
article h3 { background: #E6F4F0; color: var(--green); font-size: 3rem; text-align: center; padding: 5px 10px; margin-bottom: 30px; font-family: "M PLUS 1p", sans-serif; }

/*応募方法*/
.step_wrap { position: relative; }
.step_wrap img.parts_girl { position: absolute; aspect-ratio: 168 / 138; width: 20%; left: -100px; top: -70px; }
.step_wrap .step_flex { display: flex; justify-content: space-between; }
.step_wrap .step { width: calc(100% / 3 - 25px); }
.step_wrap .step picture { position: relative; }
.step_wrap .step:not(:last-child) picture::after { position: absolute; content: ""; display: inline-block; background: url("../img/hawaii_arrow.svg") no-repeat; background-size: contain; width: 13px; height: 19px; top: 50%; right: -25px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }
.step_wrap picture { margin-bottom: 15px; }
.step_wrap p.step_txt { font-size: 2rem; font-weight: 500; text-align: center; }
.step_wrap p.small { text-align: center; }

/*応募期間*/
.period_wrap { position: relative; }
.period_wrap img.parts_fish { position: absolute; aspect-ratio: 102 / 72; width: 15%; right: -120px; top: -70px; }
.period_wrap img.parts_hitode { position: absolute; aspect-ratio: 73 / 48; width: 8%; right: -120px; top: 20px; }
.period_wrap p.txt { font-size: 2.3rem; font-weight: 700; text-align: center; } 

/*当選発表*/
.announcement_wrap p.txt { font-size: 2.3rem; font-weight: 700; text-align: center; }
.announcement_wrap span { font-size: 60%; }

/*旅行可能期間*/
.trip_wrap p.txt { font-size: 2.3rem; font-weight: 700; text-align: center; }
.trip_wrap p.small { font-size: 1.1rem; text-align: center; }

/*応募規約*/
.applicationterms_wrap { position: relative; }
.applicationterms_wrap img.parts_tori { position: absolute; aspect-ratio: 119 / 125; width: 15%; left: -60px; top: -70px; }
.applicationterms_wrap p.txt { font-size: 1.6rem; line-height: 28px; margin-bottom: 20px; }
.applicationterms_wrap .scroll_box { background: #F4F4F4; border: 1px solid #DDDDDD; border-radius: 10px; height: 300px; overflow: scroll; padding: 5%; margin-bottom: 50px; font-family: "M PLUS 1p", sans-serif; word-break: break-all; font-size: 1.4rem; line-height: 20px; }
.applicationterms_wrap .scroll_box strong { display: block; }
.applicationterms_wrap .scroll_box p.txt { font-size: 1.4rem; line-height: 22px; }
.applicationterms_wrap .scroll_box article:not(:last-child) { margin-bottom: 30px; }
.applicationterms_wrap .scroll_box ol { padding-left: 20px; margin-top: 5px; }
.applicationterms_wrap .scroll_box ol li { list-style: circle; }
.applicationterms_wrap .scroll_box ol li::marker { margin-left: 10px; }

/*ボタン*/
.x_btn { position: relative; margin-bottom: 100px; }
.x_btn img.parts_wave02 { position: absolute; aspect-ratio: 241 / 155; width: 25%; right: -100px; top: -20px; }
.x_btn picture.x_copy { max-width: 500px; width: 45%; margin: 0 auto 10px; }
.btn { display: block; margin: 0 auto; background-color: #2A2A2A; box-shadow: 0 8px 0 #c5c5c5; border-radius: 10px; }
.x_btn .btn { max-width: 500px; }
.x_btn .btn a { display: block; padding: 0.8em 3em; box-sizing: border-box;  }
.x_btn .btn:hover { box-shadow: none; transform: translateY(8px); }
.x_btn .btn_wrap picture { max-width: 282px; margin: 0 auto; }

/*FAQ*/
.faq_wrap { margin-bottom: 120px; font-family: "M PLUS 1p", sans-serif; }
.faq_wrap h4 { font-size: 3rem; position: relative; padding-left: 110px; color: var(--green); font-weight: 700; }
.faq_wrap h4 span { font-size: 1.6rem; display: block; font-weight: 400; }
.faq_wrap h4::before { position: absolute; left: 0; content: url(../img/hawaii_parts_couple.svg); display: inline-block; width: 97px; height: 111px; bottom: -5px; } 
.faq_wrap h4 span::after { content: ''; background: url("../img/hawaii_icon_an.svg") no-repeat; background-size: contain; display: inline-block;aspect-ratio: 22 / 20; width:3%; margin-left: 5px; vertical-align: -1px; }

.faq_wrap .accordion-area li { margin: 10px 0; word-break: break-all; }
.faq_wrap .title { position: relative; cursor: pointer; font-size:1.8rem; padding: 15px 30px; transition: all .5s ease; background: #E6F4F0; border-radius: 10px; }
.faq_wrap .title img { max-width: 27px; margin-left: 0; margin-right: 20px; display: inline-block; }
.faq_wrap .title::after { position: absolute; content:''; top:20px; right: 25px; background: url("../img/hawaii_open.svg") no-repeat; width: 20px; height: 20px; }
.faq_wrap .title.close { border-radius: 10px 10px 0 0; }
.faq_wrap .title.close::after { top:20px; right: 25px; background: url("../img/hawaii_close.svg") no-repeat; width: 20px; height: 20px; }
.faq_wrap .box::before { content: ''; display: block; border-top: 1px solid #C5E8E1; width: 100%; }
.faq_wrap .box { display: none; background: #E6F4F0; padding:0 3% 3% 3%; border-radius: 0 0 10px 10px; }
.faq_wrap .box p { padding: 2% 0 0 0; }

/*お客様相談室*/
.contact_wrap { text-align: center; margin-bottom: 120px; font-family: "M PLUS 1p", sans-serif; }
.contact_wrap h4 { font-size: 3rem; font-weight: 400; margin-bottom: 40px; }
.contact_wrap p.komeda_sodan { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 15px; }
.contact_wrap img { max-width: 365px; margin: 0 auto 10px; }
.contact_wrap p.time { text-align: center; margin-bottom: 50px; }
.contact_wrap a.txt_link { font-size: 2rem; color: #2A2A2A; padding-bottom: 3px; border-bottom: 2px solid var(--green); }
.contact_wrap a.txt_link:hover { color: var(--green); }
.contact_wrap a.txt_link svg { margin-left: 5px; }

/*戻る*/
.page_top_btn { position: absolute; bottom: 20px; right: 20px; width: 132px; height: 100px; overflow: hidden; }
.page_top_btn a { background: url("../img/hawaii_pagetop_bg.svg") no-repeat; background-size: contain; aspect-ratio: 132 / 100; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.page_top_btn span { width: 30%; height: 45px; overflow: hidden; display: flex; justify-content: center; align-items: center; position: absolute; left: 30px; stroke-width: 1px !important; -webkit-animation:pagetopanime 3s cubic-bezier(0.67, -0.18, 0.54, 0.97) 0s infinite normal both; animation: pagetopanime 3s cubic-bezier(0.67, -0.18, 0.54, 0.97) 0s infinite normal both; }
@-webkit-keyframes pagetopanime {
  0% { transform: translateY(0); }
  20% { transform: translateY(0); }
  50% { transform: translateY(-300%); }
  50.0001% { transform: translateY(300%); }
  90% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes pagetopanime {
  0% { transform: translateY(0); }
  20% { transform: translateY(0); }
  50% { transform: translateY(-300%); }
  50.0001% { transform: translateY(300%); }
  90% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

img.parts_port { position: absolute; aspect-ratio: 258 / 220; width: 25%; left: -10px; bottom: 30px; }
img.parts_car { position: absolute; aspect-ratio: 204 / 78; width: 20%; left: 350px; bottom: 0; }

/*ノートPC*/
@media (max-width: 1600px) and (max-height: 900px) {
}

@media (max-width: 1366px) and (max-height: 768px) {
  img.wave { width: 17%; }
  #Kv .kv_inner .kv_copy { width: 70%; }
}

/*DynaBook*/
@media (max-width: 1263px) and (max-height: 569px) {
  #Kv .kv_inner .kv_copy { width: 60%; }
}

/*tab*/
@media only screen and (max-width: 1024px){
  img.wave { width: 18%; }
}

@media only screen and (max-width: 980px){
  #Kv { width: 100%; background: url("../img/hawaii_kv_sp.png") no-repeat; background-size: cover; background-position: center; aspect-ratio: 980 / 1306; }
  #Kv .kv_inner .kv_copy { width: 100%; } 
  
  .period_wrap img.parts_fish { right: -70px; }
  .period_wrap img.parts_hitode { width: 5%; right: -70px; top: 0; }
}

@media only screen and (max-width: 767px){
  article h3 { font-size: 2.5rem; margin-bottom: 20px; }
  article:not(:last-child) { margin-bottom: 60px; }
  
  img.yashi { left: 0; }
  img.wave { right: 5%; }
  img.flower { width: 33%; top: -32px; left: -8%; }
  img.parts_car { left: 75px; }
  .step_wrap img.parts_girl , .period_wrap img.parts_fish , .period_wrap img.parts_hitode , .applicationterms_wrap img.parts_tori , .x_btn img.parts_wave02 { display: none; }
  
  .contents { padding: 12% 8%; }
  .top_copy { margin-bottom: 15px; }
  .present_wrap p.small { text-align: left; }
  .step_wrap .step_flex { display: block; }
  .step_wrap .step { width: 100%; }
  .step_wrap .step:not(:last-child) { margin-bottom: 50px; }
  .step_wrap .step:not(:last-child) picture::after { right: 0; left: 0; top: initial; bottom: -105px; width: 16px; height: 23px; margin: 0 auto; transform: rotate(90deg); }
  .step_wrap .step picture { width: 80%; margin: 0 auto 15px; }
  
  .trip_wrap p.small { text-align: left; }
  
  .applicationterms_wrap p.txt { font-size: 1.4rem; line-height: 20px; }
  .applicationterms_wrap .scroll_box { padding: 12% 8%; }
  .applicationterms_wrap .scroll_box p.txt { font-size: 1.2rem; line-height: 18px; }
  
  .faq_wrap { margin-bottom: 100px; }
  .faq_wrap h4 { font-size: 2.5rem; padding-left: 80px; margin-bottom: 20px; }
  .faq_wrap h4::before { width: 70px; height: 82px; }
  .faq_wrap h4 span::after { width: 5%; }
  .faq_wrap h4 span { font-size: 1.4rem; }
  .faq_wrap .title img { margin-right: 10px; }
  .faq_wrap .title { font-size: 1.6rem; padding: 3% 40px 3% 5%; }
  .faq_wrap .box p { padding: 3% 2%; }
  .x_btn .btn a { padding: 1.5em 3em; }
  .contact_wrap h4 { font-size: 1.8rem; margin-bottom: 30px; }
  .contact_wrap p.komeda_sodan { font-size: 1.6rem; margin-bottom: 10px; }
  .contact_wrap img { width: 70%; }
  .contact_wrap p.time { font-size: 1.4rem; margin-bottom: 30px; }
  .contact_wrap a.txt_link { font-size: 1.6rem; }
  
  .page_top_btn { bottom: 18px; right: 10px; width: 102px; height: 80px; }
  .page_top_btn span { left: 25px; }
}

@media only screen and (max-width: 600px){
  .pc { display: none; }
  .sp { display: block; }
  article:not(:last-child) { margin-bottom: 40px; }
  article h3 { font-size: 2rem; margin-bottom: 10px; } 
  .contents_wrapper { padding: 12% 7%; border-radius: 20px; }
  .present_wrap { margin-bottom: 40px; }
  .period_wrap p.txt , .announcement_wrap p.txt , .trip_wrap p.txt { font-size: 1.6rem; }
  .x_btn .btn a { padding: 1em 3em; }
  .faq_wrap h4::before { width: 65px; height: 80px; }
  .faq_wrap h4 { padding-left: 75px; }
  .faq_wrap h4 span::after { width: 7%; }
  .faq_wrap .title { border-radius: 5px; }
  .faq_wrap .box { border-radius: 0 0 10px 10px;  }
  .faq_wrap .title img { width: 6%; vertical-align: -3px; margin-right: 6px; }
  .faq_wrap .title::after , .faq_wrap .title.close::after { top: 11px; right: 15px; width: 15px; height: 15px; }
  .contact_wrap { margin-bottom: 180px; }
  .contact_wrap img { width: 100%; }
  img.parts_car { width: 30% }
  img.parts_port { width: 35%; left: -20px; bottom: 25px; }
  img.wave { width: 23%; }
  #Kv { aspect-ratio: 600 / 800; }
  #Kv .kv_inner { width: 70%; }
  
  .contact_wrap a.txt_link { font-size: 1.4rem; }
  .faq_wrap .title , .faq_wrap .box p { font-size: 1.4rem; }
  .faq_wrap h4 span { font-size: 1.2rem; line-height: 1.3; }
  .applicationterms_wrap .scroll_box { font-size: 1.2rem; line-height: 17px; }
  .x_btn picture.x_copy { width: 70%; margin-bottom: 10px; }
}

@media only screen and (max-width: 414px){
    #Kv { aspect-ratio: 414 / 552; height: 70vh; }
}

@media only screen and (max-width: 375px){
    #Kv { aspect-ratio: 375 / 500; }
}