@charset "utf-8"; 
/* CSS Document */

/*----------------------------------------------------------------------------
***                                                                    body
----------------------------------------------------------------------------*/
*,
*::before,
*::after {box-sizing: border-box; margin: 0; padding: 0;}
body{margin:0; padding:0; border-top:none;}
p,
li{font-size: 18px; line-height: 1.5em;font-weight: 500;}
img{width: 100%; height: auto;}
a:hover{color: inherit;}
.hoverEase:hover{opacity:0.7; transition: opacity 0.3s ease-in-out;}

/*----------------------------------------------------------------------------
***                                                                     共通
----------------------------------------------------------------------------*/
:root {
  --tab01: #ff7b7b;
  --tab02: #ffa656;
  --tab03: #77d863;
  --tab04: #54c2e7;
  --tab05: #a18bd6;
}
#mainArea{padding-top: 75px;}
.sectionInner{max-width: 980px; margin: 0 auto;}
.ctaBtn a{display: inline-flex; align-items: center; width: 13em; padding: 0.6em 1em 0.6em 2em; font-size: 25px; font-weight: 600; line-height: 1; color: #fff; background-color: #e76a88; border: #fff solid 3px; border-bottom: 6px solid #fff; border-radius: 2em; box-shadow: 0 4px 10px rgba(0, 0, 0, .2);}
.ctaBtn a::after{content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.4em; background: url("../images/icon_arrow.svg") center / contain no-repeat; vertical-align: middle;}
.finBtn{text-align: center; width: 13em; margin-left: auto; margin-right: auto; padding: 0.6em 1em; font-size: 25px; font-weight: 600; line-height: 1; color: #9b9b9b !important; background-color: #e7e7e7; border: #9b9b9b solid 3px; border-radius: 2em;}


/*----------------------------------------------------------------------------
***                                                                   header
----------------------------------------------------------------------------*/
#headerArea{position: fixed; width: 100%; height: 75px; border-bottom: 5px solid #e3006d; background: #fff; z-index: 999;}
#headerArea .headerAreaInner{position: relative; width: 100%; max-width:980px; margin:0 auto; padding:  0.5em 0; display: flex; align-items: center; justify-content: space-between;}
#headerArea .headerAreaInner .logo{display: flex; align-items: center; justify-content: space-between;}
#headerArea .headerAreaInner .logo a{display: block; max-width: 180px;}
#headerArea .headerAreaInner .logo a:last-child{max-width: 350px;}
#headerArea .headerAreaInner .logo .kakeru{padding: 0 0.5em;}


/*----------------------------------------------------------------------------
***                                                                 titleSec
----------------------------------------------------------------------------*/
#titleSec .titleSecInner{position: relative; background: url(../images/bg_fv.jpg) no-repeat center; background-size: 1920px; height: 790px; padding-top: 1em;}
#titleSec .ttlBox{position: relative; width: 100%; max-width: 925px; aspect-ratio: 925 / 516; margin: 0 auto; background: url(../images/bg_blackboard.png) center / 100% auto no-repeat;}
#titleSec .ttlBox::after {content: ""; display: block; position: absolute; bottom: -4vw; right: -4vw; background: url(../images/img_usamain02.png) no-repeat center; background-size: contain; width: 22vw; max-width: 230px; aspect-ratio: 230 / 221; z-index: 2;}
#titleSec .ttlBox::before{content: ""; display: block; position: absolute; bottom: -4vw; left: -5vw; background: url(../images/img_usamain01.png) no-repeat center; background-size: contain; width: 25vw; max-width: 280px; aspect-ratio: 280 / 320; z-index: 2;}
#titleSec .ttlBox .ttlTxt{position: absolute; transform: translate(-50%,-50%); top: 46%; left: 50%; width: 80%; max-width: 705px; aspect-ratio: 705 / 200;}
#titleSec .ttlBox .ttlTxt::before{content: ""; position: absolute; top: -30%; left: 2%; background: url(../images/img_subttl.png) no-repeat center; background-size: contain; width: 28vw; max-width: 200px; aspect-ratio: 400 / 90;}
#titleSec .ttlBox .subTxt{position: absolute; top: 0; right: -7.5vw; width: 54vw; max-width: 570px; aspect-ratio: 570 / 200;}
#titleSec .ttlBox .dateTxt{position: absolute; transform: translateX(-50%); bottom: 2vw; left: 50%; width: 56%; max-width: 500px; aspect-ratio: 500 / 135;}
#titleSec .leadBox{position: absolute; transform: translateX(-50%); bottom: 3em; left: 50%; width: 100%;}


/*----------------------------------------------------------------------------
***                                                                 clossSec
----------------------------------------------------------------------------*/
#clossSec{background: url(../images/bg_closs.png) no-repeat; background-color: #b0eadd; background-size: contain; background-position: center bottom;}
#clossSec .sectionInner{padding: 1em 0 0;}
#clossSec .clossBox{padding: 3em 0 5em;}
#clossSec .secTtl{max-width: 910px; aspect-ratio: 910 / 131; width: 100%; max-width: 90vw; height: auto; margin: 0 auto 1.5em;}
#clossSec .detailBox .detailBoxInner{gap: 1em; background: #fff; border-radius: 0.8em; width: 100%; max-width: 90vw; margin: 0 auto; padding: 2.6em 4.6em;}
#clossSec .detailBox .detailBoxInner p{font-size: 18px; line-height: 2.2em; width: 70%;}
#clossSec .detailBox .detailBoxInner p .underLine{background: linear-gradient(transparent 62%, #ece58d 0%);}
#clossSec .detailBox .detailBoxInner .clossImg{max-width: 257px; aspect-ratio: 257 / 256;}


/*----------------------------------------------------------------------------
***                                                              scheduleSec
----------------------------------------------------------------------------*/
#scheduleSec{overflow: hidden;}
#scheduleSec .sectionInner{padding: 6em 0;}
#scheduleSec .secTtl{max-width: 427px; aspect-ratio: 427 / 49; margin: 0 auto 1em;}

/* 地域選択-タブ */
#scheduleSec input[name="tabItem"]{display: none;}
#scheduleSec #tab01_btn,
#scheduleSec #tab02_btn,
#scheduleSec #tab03_btn,
#scheduleSec #tab04_btn,
#scheduleSec #tab05_btn{display: inline-block; width: calc(945px / 5); text-align: center; margin: 0 0.1em 1em 0; padding: 0.3em 0; background-color: #d0d0d0; color: #666; font-weight: bold; font-size: 166%; border-radius: 5px;}
#scheduleSec #tab01:checked ~ #tab01_btn{background-color: var(--tab01); position: relative; color: #fff;}
#scheduleSec #tab01:checked ~ #tab01_btn::after{color: var(--tab01); content: ""; position: absolute; transform: translate(-50%, 0); bottom: -13px; left: 50%; display: block; width: 0; height: 0; border-right: 0.4em solid transparent; border-left: 0.4em solid transparent; border-top: 0.6em solid;}
#scheduleSec #tab02:checked ~ #tab02_btn{background-color: var(--tab02); position: relative; color: #fff;}
#scheduleSec #tab02:checked ~ #tab02_btn::after{color: var(--tab02); content: ""; position: absolute; transform: translate(-50%, 0); bottom: -13px; left: 50%; display: block; width: 0; height: 0; border-right: 0.4em solid transparent; border-left: 0.4em solid transparent; border-top: 0.6em solid;}
#scheduleSec #tab03:checked ~ #tab03_btn{background-color: var(--tab03); position: relative; color: #fff;}
#scheduleSec #tab03:checked ~ #tab03_btn::after{color: var(--tab03); content: ""; position: absolute; transform: translate(-50%, 0); bottom: -13px; left: 50%; display: block; width: 0; height: 0; border-right: 0.4em solid transparent; border-left: 0.4em solid transparent; border-top: 0.6em solid;}
#scheduleSec #tab04:checked ~ #tab04_btn{background-color: var(--tab04); position: relative; color: #fff;}
#scheduleSec #tab04:checked ~ #tab04_btn::after{color: var(--tab04); content: ""; position: absolute; transform: translate(-50%, 0); bottom: -13px; left: 50%; display: block; width: 0; height: 0; border-right: 0.4em solid transparent; border-left: 0.4em solid transparent; border-top: 0.6em solid;}
#scheduleSec #tab05:checked ~ #tab05_btn{background-color: var(--tab05); position: relative; color: #fff;}
#scheduleSec #tab05:checked ~ #tab05_btn::after{color: var(--tab05); content: ""; position: absolute; transform: translate(-50%, 0); bottom: -13px; left: 50%; display: block; width: 0; height: 0; border-right: 0.4em solid transparent; border-left: 0.4em solid transparent; border-top: 0.6em solid;}

/* 地域選択-内容 */
#scheduleSec .tabContent{display: none; padding: 1.5em 0 3em; max-width: 980px; margin: 0 auto; border-radius: 0.6em; background: #fffff0;}
#scheduleSec .tabContent .themeTtl{display: flex; justify-content: flex-start; align-items: center; gap: 4em;}
#scheduleSec .tabContent .themeTtl .ttlTxt{order: 2; font-size: 170%;}
#scheduleSec .tabContent .themeTtl .ttlFlag{order: 1; position: relative; display: flex; align-items: center; gap: 0.5em; height: 3.2em; padding: 0.5em 1em; color: #fff; font-size: 20px; line-height: 1.1;}
#scheduleSec .tabContent .themeTtl .ttlFlag::after{content: ""; position: absolute; transform: translate(99%,-50%); top: 50%; right: 0; width: 0; height: 0; border-right: transparent solid 1em;}
#scheduleSec .tabContent .themeTtl .ttlFlag::before{content: ""; display: block; width: 2em; height: 2em; background: url(../images/icon_glass.svg) center / contain no-repeat;}
#scheduleSec .tabContent .themeDetail{width: 90vw; max-width: 800px; margin: 0 auto;}
#scheduleSec .tabContent .themeDetail .subTxt{margin: 1.5em 0; padding: 1em 0.5em; font-size: 116%;border-radius: 0.3em; text-align: center;}
#scheduleSec .tabContent .themeDetail .flexBox{display: flex; align-items: center; justify-content: space-between; gap: 1em;}
#scheduleSec .tabContent .themeDetail .flexBox .themeTxt{width: 55%;}
#scheduleSec .tabContent .themeDetail .flexBox .themeTxt dl{display: flex; flex-direction: column; font-size: 18px;}
#scheduleSec .tabContent .themeDetail .flexBox .themeTxt dl .item{display: flex; padding: 0.5em; border-bottom: #bbb dotted 2px;}
#scheduleSec .tabContent .themeDetail .flexBox .themeTxt dl .item dt{width: 4.5em;}
#scheduleSec .tabContent .themeDetail .flexBox .themeTxt dl .item dt::before{content: "●";}
#scheduleSec .tabContent .themeDetail .flexBox .themeImg{position: relative; max-width: 330px; aspect-ratio: 330 / 320;}
#scheduleSec .tabContent .themeDetail .flexBox .themeImg::after{content: ""; display: block; position: absolute; width: 152px; height: 216px; z-index: 3;}
#scheduleSec .tabContent#tab01_content .themeDetail .flexBox .themeImg::after{background: url(../images/img_usa01.png) center / contain no-repeat; bottom: -1.5em; right: -3.5em;}
#scheduleSec .tabContent#tab02_content .themeDetail .flexBox .themeImg::after{background: url(../images/img_usa02.png) center / contain no-repeat; bottom: -1.5em; right: -1.5em;}
#scheduleSec .tabContent#tab03_content .themeDetail .flexBox .themeImg::after{background: url(../images/img_usa03.png) center / contain no-repeat; bottom: -1.5em; right: -2.5em;}
#scheduleSec .tabContent#tab04_content .themeDetail .flexBox .themeImg::after{background: url(../images/img_usa04.png) center / contain no-repeat; bottom: -1.5em; right: -2.5em;}
#scheduleSec .tabContent#tab05_content .themeDetail .flexBox .themeImg::after{background: url(../images/img_usa05.png) center / contain no-repeat; bottom: -1.5em; right: -3.5em;}
#scheduleSec #tab01:checked ~ #tab01_content,
#scheduleSec #tab02:checked ~ #tab02_content,
#scheduleSec #tab03:checked ~ #tab03_content,
#scheduleSec #tab04:checked ~ #tab04_content,
#scheduleSec #tab05:checked ~ #tab05_content{display: block;}

/* 地域別配色-詳細の縁取り */
#scheduleSec .tabContent#tab01_content{border: color-mix(in srgb, var(--tab01) 50%, white) solid 0.5em;}
#scheduleSec .tabContent#tab02_content{border: color-mix(in srgb, var(--tab02) 50%, white) solid 0.5em;}
#scheduleSec .tabContent#tab03_content{border: color-mix(in srgb, var(--tab03) 50%, white) solid 0.5em;}
#scheduleSec .tabContent#tab04_content{border: color-mix(in srgb, var(--tab04) 50%, white) solid 0.5em;}
#scheduleSec .tabContent#tab05_content{border: color-mix(in srgb, var(--tab05) 50%, white) solid 0.5em;}
/* 地域別配色-詳細のタイトル */
#scheduleSec .tabContent#tab01_content .themeTtl .ttlTxt .underLine{background: linear-gradient(transparent 71%, color-mix(in srgb, var(--tab01) 75%, white) 0%);}
#scheduleSec .tabContent#tab02_content .themeTtl .ttlTxt .underLine{background: linear-gradient(transparent 71%, color-mix(in srgb, var(--tab02) 75%, white) 0%);}
#scheduleSec .tabContent#tab03_content .themeTtl .ttlTxt .underLine{background: linear-gradient(transparent 71%, color-mix(in srgb, var(--tab03) 75%, white) 0%);}
#scheduleSec .tabContent#tab04_content .themeTtl .ttlTxt .underLine{background: linear-gradient(transparent 71%, color-mix(in srgb, var(--tab04) 75%, white) 0%);}
#scheduleSec .tabContent#tab05_content .themeTtl .ttlTxt .underLine{background: linear-gradient(transparent 71%, color-mix(in srgb, var(--tab05) 75%, white) 0%);}
/* 地域別配色-詳細の旗 */
#scheduleSec .tabContent#tab01_content .themeTtl .ttlFlag{background-color: var(--tab01);}
#scheduleSec .tabContent#tab02_content .themeTtl .ttlFlag{background-color: var(--tab02);}
#scheduleSec .tabContent#tab03_content .themeTtl .ttlFlag{background-color: var(--tab03);}
#scheduleSec .tabContent#tab04_content .themeTtl .ttlFlag{background-color: var(--tab04);}
#scheduleSec .tabContent#tab05_content .themeTtl .ttlFlag{background-color: var(--tab05);}
#scheduleSec .tabContent#tab01_content .themeTtl .ttlFlag::after{border-top: var(--tab01) solid 1.6em; border-bottom: var(--tab01) solid 1.6em;}
#scheduleSec .tabContent#tab02_content .themeTtl .ttlFlag::after{border-top: var(--tab02) solid 1.6em; border-bottom: var(--tab02) solid 1.6em;}
#scheduleSec .tabContent#tab03_content .themeTtl .ttlFlag::after{border-top: var(--tab03) solid 1.6em; border-bottom: var(--tab03) solid 1.6em;}
#scheduleSec .tabContent#tab04_content .themeTtl .ttlFlag::after{border-top: var(--tab04) solid 1.6em; border-bottom: var(--tab04) solid 1.6em;}
#scheduleSec .tabContent#tab05_content .themeTtl .ttlFlag::after{border-top: var(--tab05) solid 1.6em; border-bottom: var(--tab05) solid 1.6em;}
/* 地域別配色-詳細の背景色付きテキスト */
#scheduleSec .tabContent#tab01_content .themeDetail .subTxt{color: color-mix(in srgb, var(--tab01) 75%, black); background-color: color-mix(in srgb, var(--tab01) 20%, white);}
#scheduleSec .tabContent#tab02_content .themeDetail .subTxt{color: color-mix(in srgb, var(--tab02) 75%, black); background-color: color-mix(in srgb, var(--tab02) 20%, white);}
#scheduleSec .tabContent#tab03_content .themeDetail .subTxt{color: color-mix(in srgb, var(--tab03) 75%, black); background-color: color-mix(in srgb, var(--tab03) 20%, white);}
#scheduleSec .tabContent#tab04_content .themeDetail .subTxt{color: color-mix(in srgb, var(--tab04) 75%, black); background-color: color-mix(in srgb, var(--tab04) 20%, white);}
#scheduleSec .tabContent#tab05_content .themeDetail .subTxt{color: color-mix(in srgb, var(--tab05) 75%, black); background-color: color-mix(in srgb, var(--tab05) 20%, white);}
/* 地域別配色-詳細の● */
#scheduleSec .tabContent#tab01_content .themeDetail .flexBox .themeTxt dl .item dt::before{color: var(--tab01);}
#scheduleSec .tabContent#tab02_content .themeDetail .flexBox .themeTxt dl .item dt::before{color: var(--tab02);}
#scheduleSec .tabContent#tab03_content .themeDetail .flexBox .themeTxt dl .item dt::before{color: var(--tab03);}
#scheduleSec .tabContent#tab04_content .themeDetail .flexBox .themeTxt dl .item dt::before{color: var(--tab04);}
#scheduleSec .tabContent#tab05_content .themeDetail .flexBox .themeTxt dl .item dt::before{color: var(--tab05);}


/*----------------------------------------------------------------------------
***                                                               reportsec
----------------------------------------------------------------------------*/
#reportsec{border-top: dashed 2px #8e8e8e;}
#reportsec .sectionInner{padding: 6em 0 4em;}
#reportsec .sectionInner > .secTtl{max-width: 445px; aspect-ratio: 445 / 75; margin: 0 auto 1em;}
#reportsec .sectionInner .stepFlow{display: flex; justify-content: space-between; align-items: center;}
#reportsec .sectionInner .stepFlow li{position: relative; margin: 2em 0 4em;}
#reportsec .sectionInner .stepFlow li:not(:last-child)::after{content: ""; position: absolute; width: 0; height: 0; top: 50%; right: -5em; border-style: solid; border-color: #ff8980 transparent transparent transparent; border-width: 23px 23px 0 23px; transform: rotate(-90deg) translateY(-50%);}
#reportsec .sectionInner .stepFlowDetail .stepBox{margin-bottom: 2em;}
#reportsec .sectionInner .stepFlowDetail .ttlBox{display: flex; align-items: center; gap: 1.5em; border-bottom: solid 6px #ffb4b0; margin-bottom: 2.4em; padding: 0.5em 2em;}
#reportsec .sectionInner .stepFlowDetail .ttlBox .secTtl{order: 2; font-size: 20px;}
#reportsec .sectionInner .stepFlowDetail .ttlBox .stepImg{order: 1; max-width: 189px; aspect-ratio: 189 / 94;}
#reportsec .sectionInner .stepFlowDetail .photoBox{display: flex; flex-wrap: wrap; justify-content: center; gap: 2em;}
#reportsec .sectionInner .stepFlowDetail .photoBox li{max-width: 400px; width: 100%; aspect-ratio: 400 / 250;}


/*----------------------------------------------------------------------------
***                                                                voicesec
----------------------------------------------------------------------------*/
#voicesec{margin: 0 auto 3em;}
#voicesec .sectionInner{position: relative; background: #fff3f3; padding: 2em 4.5em;}
#voicesec .sectionInner .secTtl{max-width: 473px; aspect-ratio: 473 / 75; margin: 0 auto 1em;}
#voicesec .sectionInner .voiceList li{position: relative; font-size: 105%; border-bottom: dashed 2px #8e8e8e; padding: 0.8em 1em 0.8em 3em;}
#voicesec .sectionInner .voiceList li::before{content: ""; position: absolute; transform: translate(0%,-50%); top: 50%; left: 0; background: url(../images/report/img_usa_mark.png) center / contain no-repeat; width: 34px; height: 34px;}
#voicesec .sectionInner .usagi{max-width: 215px; aspect-ratio: 215 / 270; margin: 0 auto;}


/*----------------------------------------------------------------------------
***                                                            reportBtnSec
----------------------------------------------------------------------------*/
#reportBtnSec{margin: 3em auto;}
#reportBtnSec .sectionInner{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em;}
#reportBtnSec .sectionInner a{display: inline-flex; align-items: center; width: fit-content; padding: 0.6em 0.6em 0.6em 1em; font-size: 22px; font-weight: 600; text-align: center; line-height: 1; color: #fff; background-color: #e76a88;border-radius: 2em;}
#reportBtnSec .sectionInner a::after{content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.2em; background: url("../images/icon_arrow.svg") center / contain no-repeat; vertical-align: middle;}


/*----------------------------------------------------------------------------
***                                                                 backBtn
----------------------------------------------------------------------------*/
#backBtn{margin: 5em auto;}
#backBtn a{display: block; background: #8e8e8e; padding: 1em 0; max-width: 260px; text-align: center; color: #FFF; font-weight: bold; margin: 0 auto;}


/*----------------------------------------------------------------------------
***                                                                  footer
----------------------------------------------------------------------------*/
footer{background-color: #58595b; padding: 0.5em 0;}
footer p{color: #fff; font-size: 0.8em;}