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

/*----------------------------------------------------------------------------
***                                                                    body
----------------------------------------------------------------------------*/
body{border-top: none; background-color: #fff;}
body #wrap{font-family:"Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; width: 100%; margin:0; padding:0; border-top:none; background-color: #fff;}
body #wrap *{font-family:"Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal;}
body #contentsArea{width: 100%; padding: 0;}
body #sukusuku *,
body #sukusuku *::before,
body #sukusuku *::after {box-sizing: border-box; margin: 0; padding: 0;}
body #sukusuku p,
body #sukusuku li{font-size: 18px; line-height: 1.5em; font-weight: 500; color: #41220d;}
body #sukusuku img{max-width: 100%; height: auto;}
body #sukusuku a:hover{color: inherit;}
body #sukusuku .hoverEase:hover{opacity:0.7; transition: opacity 0.3s ease-in-out;}

/*----------------------------------------------------------------------------
***                                                                     共通
----------------------------------------------------------------------------*/
#sukusuku .section{margin: 60px 0;}
#sukusuku .sectionInner{max-width: 980px; margin: 0 auto;}
#sukusuku .underLine{background: linear-gradient(transparent 50%, #fcf49a 0%);}


/*----------------------------------------------------------------------------
***                                                                   header
----------------------------------------------------------------------------*/
#sukusuku #headerArea{position: fixed; width: 100%; height: 75px; border-top: none; border-bottom: 5px solid #e3006d; background: #fff; z-index: 999;}
#sukusuku #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;}
#sukusuku #headerArea .headerAreaInner .logo{display: flex; align-items: center; justify-content: space-between;}
#sukusuku #headerArea .headerAreaInner .logo a{display: block; max-width: 200px;}


/*----------------------------------------------------------------------------
***                                                                 titleSec
----------------------------------------------------------------------------*/
#sukusuku #titleSec{position: relative; padding-top: 75px; background-color: #eff0e8; overflow: hidden;}
#sukusuku #titleSec::before{content: ""; position: absolute; background: url(../images/deco_fv01.png) center / contain no-repeat; width: 100%; max-width: 570px; aspect-ratio: 570 / 982; transform: translate(-100%,-50%); top: 63%; left: calc(51% - 480px);}
#sukusuku #titleSec::after {content: ""; position: absolute; background: url(../images/deco_fv02.png) center / contain no-repeat; width: 100%; max-width: 570px; aspect-ratio: 570 / 982; transform: translate(100%,-50%); top: 65%; right: calc(48% - 480px);}
#sukusuku #titleSec .sectionInner{padding: 50px 0;}
#sukusuku #titleSec .ttlBox{position: relative; display: flex; flex-direction: column; align-items: center;}
#sukusuku #titleSec .ttlBox::before{content: ""; position: absolute; background: url(../images/deco_character01.png) center / contain no-repeat; width: 100%; max-width: 95px; aspect-ratio: 190 / 316; bottom: -10px; left: 0;}
#sukusuku #titleSec .ttlBox::after {content: ""; position: absolute; background: url(../images/deco_character02.png) center / contain no-repeat; width: 100%; max-width: 105px; aspect-ratio: 210 / 388; bottom: -10px; right: 0;}
#sukusuku #titleSec .ttlBox .ttlTxt{order: 2; font-size: 62px; text-align: center; color: #41220d;}
#sukusuku #titleSec .ttlBox .ttlTxt .underLine{padding: 0 0.1em;}
#sukusuku #titleSec .ttlBox .subTxt{order: 1; display: flex; align-items: center; margin-bottom: 20px;}
#sukusuku #titleSec .ttlBox .subTxt .nbk{max-width: 200px; aspect-ratio: 400 / 112;}
#sukusuku #titleSec .ttlBox .subTxt .kakeru{font-size: 42px; font-weight: 600;}
#sukusuku #titleSec .ttlBox .subTxt .sukusuku{max-width: 351px; aspect-ratio: 702 / 112;}
#sukusuku #titleSec .emblemBox{position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 776px; margin: 30px auto 0;}
#sukusuku #titleSec .emblemBox::before{content: ""; position: absolute; background: url(../images/deco_leaf.png) center / contain no-repeat; width: 100%; max-width: 60px; aspect-ratio: 60 /252; top: 10%; left: calc(50% - 480px);}
#sukusuku #titleSec .emblemBox::after {content: ""; position: absolute; background: url(../images/deco_leaf.png) center / contain no-repeat; width: 100%; max-width: 60px; aspect-ratio: 60 /252; top: 10%; right: calc(50% - 480px); transform: translateX(-100%); transform: scaleX(-1);}
#sukusuku #titleSec .emblemBox .emblemImg{max-width: 240px; aspect-ratio: 380 / 450;}


/*----------------------------------------------------------------------------
***                                                                 leadSec
----------------------------------------------------------------------------*/
#sukusuku .leadSec .leadTxt{text-align: center; line-height: 1.8; font-size: 24px; font-weight: 600;}


/*----------------------------------------------------------------------------
***                                                            numberingSec
----------------------------------------------------------------------------*/
#sukusuku .numberingSec{margin: 80px 0;}
#sukusuku .numberingSec .secTtl{display: flex; align-items: center; gap: 1em; color: #41220d;}
#sukusuku .numberingSec .secTtl .num{display: block; font-size: 86px; line-height: 1.2; padding-bottom: 0.06em;}
#sukusuku .numberingSec .secTtl .txt{display: block; font-size: 34px; line-height: 1.2;}
#sukusuku .numberingSec .graphBox{display: flex; justify-content: space-between; gap: 2em; margin: 40px 0;}
#sukusuku .numberingSec .graphBox .txt{width: auto;line-height: 1.8;}
#sukusuku .numberingSec .graphBox .img{width: 100%; max-width: 425px; aspect-ratio: 425 / 319; flex-shrink: 0;}
#sukusuku .numberingSec .voiceBox{background-color: #f8f3e7; border-radius: 10px; padding: 40px 50px 50px;}
#sukusuku .numberingSec .voiceBox .voiceTtl{position: relative; width: fit-content; color: #41220d; font-size: 32px; margin: 0 auto 0.5em; padding-right: 1em;}
#sukusuku .numberingSec .voiceBox .voiceTtl::after{content: "";position: absolute; background: url(../images/ico_balloon.svg) center / contain no-repeat; width: 100%; max-width: 46px; aspect-ratio: 46 / 40; transform: translateY(-50%); top: 50%; right: -1em;}
#sukusuku .numberingSec .voiceBox .voiceList{height: 300px; overflow-y: auto;}
#sukusuku .numberingSec .voiceBox .voiceList li{padding: 1em; border-bottom: #41220d dashed 2px;}


/*----------------------------------------------------------------------------
***                                                                  footer
----------------------------------------------------------------------------*/
#footerCopyright p{text-align: right; color: #666; line-height: 1.4em; margin: 0; padding: 0;}