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

/*----------------------------------------------------------------------------
***                                                                    body
----------------------------------------------------------------------------*/
p,
li{font-size: 16px; line-height: 1.4em;}
#mainArea{padding-top: 11vw;}
#breadcrumbArea{padding: 0.5em 0 0;}
.sectionInner{width: 92%;}

/*----------------------------------------------------------------------------
***                                                                   header
----------------------------------------------------------------------------*/
#headerArea{height: 11vw; border-bottom: 3px solid #e3006d;}
#headerArea .headerAreaInner{padding: 0.5em; gap: 1em;}
#headerArea .headerAreaInner .logo .kakeru{padding: 0;}
#headerArea .headerAreaInner .tel{padding-bottom: 0.2em;}


/*----------------------------------------------------------------------------
***                                                                 titleSec
----------------------------------------------------------------------------*/
#titleSec{overflow: hidden;}
#titleSec .titleSecInner{padding-top: 10vw;}
#titleSec .ttlBox{position: relative; width: 95%; max-width: 360px; aspect-ratio: 360 / 480; margin: 0 auto; background: url(../images/bg_blackboard_sp.png) center / 100% auto no-repeat;}
#titleSec .ttlBox::before{content: none;}
#titleSec .ttlBox::after {background: url(../images/img_usamain02_sp.png) center / contain no-repeat; bottom: -9%; width: 110vw; max-width: 400px; aspect-ratio: 400 / 130;}
#titleSec .ttlBox .ttlTxt{width: 90%; top: 34%; max-width: 310px; aspect-ratio: 310 / 120;}
#titleSec .ttlBox .ttlTxt::before{width: 90%; transform: translateX(-50%); top: -40%; left: 50%;}
#titleSec .ttlBox .subTxt{position: absolute; top: -4%; right: -7.5vw; width: 84%; max-width: 570px; aspect-ratio: 570 / 200;}
#titleSec .ttlBox .dateTxt{position: absolute; transform: translateX(-50%); bottom: 22vw; left: 50%; width: 85%; max-width: 310px; aspect-ratio: 310 / 157;}


/*----------------------------------------------------------------------------
***                                                                 clossSec
----------------------------------------------------------------------------*/
#clossSec .sectionInner{padding: 0;}
#clossSec .secTtl{max-width: 100%; aspect-ratio: 755 / 305; margin-bottom: 1em;}
#clossSec .clossBox{padding: 2em 0 5em;}
#clossSec .detailBox .detailBoxInner{flex-direction: column; gap: 1em; padding: 2em;}
#clossSec .detailBox .detailBoxInner p{line-height: 2em; width: 100%; font-size: 16px;}


/*----------------------------------------------------------------------------
***                                                              scheduleSec
----------------------------------------------------------------------------*/
#scheduleSec .sectionInner{padding: 4em 0;}
#scheduleSec .secTtl{width: 90vw;}
#scheduleSec #tab01_btn, #scheduleSec #tab02_btn, #scheduleSec #tab03_btn, #scheduleSec #tab04_btn, #scheduleSec #tab05_btn{width: 40vw;}
#scheduleSec .tabContent .themeTtl{flex-direction: column; align-items: flex-start; gap: 1em;}
#scheduleSec .tabContent .themeTtl .ttlTxt{font-size: 160%; padding: 0 3vw;}
#scheduleSec .tabContent .themeDetail{width: 100%; padding: 0 3vw;}
#scheduleSec .tabContent .themeDetail .subTxt{text-align: left;}
#scheduleSec .tabContent .themeDetail .flexBox{flex-direction: column;}
#scheduleSec .tabContent .themeDetail .flexBox .themeTxt{width: 100%;}
#scheduleSec .tabContent .themeDetail .flexBox .themeTxt dl{font-size: 14px;}
#scheduleSec .tabContent .themeDetail .flexBox .themeImg::after{width: 76px; height: 108px;}
#scheduleSec .tabContent#tab01_content .themeDetail .flexBox .themeImg::after{bottom: -1.5em; right: -1.5em;}
#scheduleSec .tabContent#tab02_content .themeDetail .flexBox .themeImg::after{bottom: -1.5em; right: -1.5em;}
#scheduleSec .tabContent#tab03_content .themeDetail .flexBox .themeImg::after{bottom: -1.5em; right: -1.5em;}
#scheduleSec .tabContent#tab04_content .themeDetail .flexBox .themeImg::after{bottom: -1.5em; right: -1.5em;}
#scheduleSec .tabContent#tab05_content .themeDetail .flexBox .themeImg::after{bottom: -1.5em; right: -1.5em;}


/*----------------------------------------------------------------------------
***                                                               reportsec
----------------------------------------------------------------------------*/
#reportsec .sectionInner{padding: 4em 0 2em;}
#reportsec .sectionInner > .secTtl{width: 90vw; padding-right: 1em;}
#reportsec .sectionInner .stepFlow li{margin: 2em 0;}
#reportsec .sectionInner .stepFlow li:not(:last-child)::after{content: none;}
#reportsec .sectionInner .stepFlowDetail .ttlBox{flex-direction: column; gap: 1em; margin-bottom: 2em; padding: 0.5em;}
#reportsec .sectionInner .stepFlowDetail .photoBox{flex-direction: column;}


/*----------------------------------------------------------------------------
***                                                                voicesec
----------------------------------------------------------------------------*/
#voicesec .sectionInner{padding: 2em;}
#voicesec .sectionInner .secTtl{margin-bottom: 0.5em;}
#voicesec .sectionInner .voiceList li::before{width: 2em; height: 2em;}
#voicesec .sectionInner .usagi{max-width: 150px;}


/*----------------------------------------------------------------------------
***                                                            reportBtnSec
----------------------------------------------------------------------------*/
#reportBtnSec .sectionInner{flex-direction: column; align-items: center;}