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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/*--------------------------------------------
 ベースのスタイル
--------------------------------------------*/
*{
  box-sizing: border-box;
}

:root {
   --pink: #c70079;
   
}

html {
	word-break: break-all;
}

img{
   height: auto;
   max-width: 100%;
}

body {
   font-size: 20px;
   line-height: 1.6;
   font-weight: 400;
   background: #fff;
   letter-spacing: 1px;
   -webkit-text-size-adjust: 100%;
   font-family: "Noto Sans JP", sans-serif;
   /*min-width: 1200px;*/
   margin: 0;
   padding: 0;
	}
	@media screen and (max-width: 767px) {
		body{
			min-width:initial;
			font-size: 15px;
		}
		body * {
		  box-sizing : border-box;
		}
	}

button{
   font-family: "Noto Sans JP", sans-serif;
}

.btn a{
   display: block;
   text-align: center;
   text-decoration: none;
}
.btn-white a{
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   color: #fff;
   font-weight: 600;
   padding: 12px 30px 12px 50px;
   background: var(--pink);
   border: 3px solid #fff;
   border-radius: 50px;
   box-shadow: 4px 4px 0 #fff;
   text-decoration: none;
   transition: .3s ease;
}
.btn-white a::after{
   content: "";
   display: block;
   width: 30px;
   height: 30px;
   background: url("../img/btn_icon-white.png") no-repeat center;
   background-size: cover;
   flex-shrink: 0;
   margin-left: 10px;
   transition: .3s ease;
}
@media (hover: hover){
   .btn-white a:hover{
      color: var(--pink);
      background: #eba6d0;
      box-shadow: 5px 5px 0 #fff;
   }
   .btn-white a:hover::after{
      background: url("../img/btn_icon-white_hover.png") no-repeat center;
      background-size: cover;
   }
}
.btn-pink a{
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: var(--pink);
   padding: 10px 30px 10px 50px;
   background: #fff;
   border: 3px solid var(--pink);
   border-radius: 50px;
   box-shadow: 5px 5px 0 var(--pink);
   text-decoration: none;
   font-size: .9em;
   font-weight: 600;
   transition: .3s ease;
}
.btn-pink a::after{
   content: "";
   display: block;
   width: 23px;
   height: 23px;
   background: url("../img/btn_icon-pink.png") no-repeat center;
   background-size: cover;
   flex-shrink: 0;
   margin-left: 10px;
   transition: .3s ease;
}
@media (hover: hover){
   .btn-pink a:hover{
      color: #fff;
      background: var(--pink);
      border-color: #fff;
      box-shadow: 5px 5px 0 #fff;
   }
   .btn-pink a:hover::after{
      background: url("../img/btn_icon-pink_hover.png") no-repeat center;
      background-size: cover;
   }
}

.sp-br{
   display: none;
}
.pc-br{
   display: inline;
}

@media screen and (max-width: 767px){
   img{
      max-width: 100%;
   }
   .sp-br{
      display: inline;
   }
   .pc-br{
      display: none;
   }
}


/*--------------------------------------------
 header
--------------------------------------------*/
.header{
   position: sticky;
   top: 0;
   z-index: 100;
   background: #fff;
   padding: 15px;
   transition: box-shadow .3s ease;
}
.logo{
   text-align: center;
}
.logo-img{
   margin: 0;
   padding: 0;
}
.header.is-scroll{
   top: 10px;
   margin: 10px;
   box-shadow: 0 5px 15px rgba(0,0,0,.15);
}

@media screen and (max-width: 767px){
   .logo-img{
      max-width: 150px;
      display: block;
      margin: auto;
   }
}


/* menu
--------------------------------------------*/
.hamburger{
   position: absolute;
   top: 50%;
   right: 15px;
   transform: translateY(-50%);
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: var(--pink);
   border: none;
   cursor: pointer;
   padding: 0;
   border: 3px solid transparent;
}
.hamburger span{
   position: absolute;
   left: 50%;
   width: 24px;
   height: 3px;
   background: #fff;
   border-radius: 999px;
   transform: translateX(-50%);
   transition: all .3s ease;
}
.hamburger span:nth-child(1){
   top:18px;
}
.hamburger span:nth-child(2){
   top:27px;
}
.hamburger span:nth-child(3){
   top:36px;
}
.hamburger.active{
   background: transparent;
   border-color: var(--pink);
}
.hamburger.active span{
   background: var(--pink);
}

.menu-box{
   position: absolute;
   right: 15px;
   top: 120px;
   background: #fff;
   border: 3px solid var(--pink);
   box-shadow: 9px 9px 0 var(--pink);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
   transition: .25s;
   padding: 30px;
   text-align: right;
}
.menu-close{
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: var(--pink);
   border: none;
   position: relative;
   cursor: pointer;
   padding: 0;
}
.menu-box.show{
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}
.menu-close span{
   position: absolute;
   top: 50%;
   left: 50%;
   width: 24px;
   height: 3px;
   background: #fff;
   border-radius: 999px;
}
.menu-close span:nth-child(1){
   transform: translate(-50%, -50%) rotate(45deg);
}
.menu-close span:nth-child(2){
   transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-box__nav,
.menu-box__tab{
   margin: 0;
   padding: 0;
   list-style: none;
   line-height: 130%;
}
.menu-box__nav li + li{
   border-top: 1px solid var(--pink);
}
.menu-box__nav li a{
   display: block;
   color: var(--pink);
   font-size: 16px;
   font-weight: 600;
   text-decoration: none;
   padding: 15px 0;
   transition: .3s ease;
}
@media (hover: hover){
   .menu-box__nav li a:hover{
      opacity: .6;
   }
}
.menu-box__tab li{
   margin-bottom: 5px;
}
.menu-box__tab li button{
   display: inline-block;
   color: var(--pink);
   font-weight: 600;
   font-size: 16px;
   border: 1px solid var(--pink);
   background: #fff;
   border-radius: 50px;
   text-decoration: none;
   padding: 3px 20px;
   transition: .3s ease;
   letter-spacing: 1px;
   cursor: pointer;
}
@media (hover: hover){
   .menu-box__tab li button:hover{
      color: #fff;
      background: var(--pink);
   }
}
.menu-box__tab li button .year-unit{
   font-size: .9em;
}

/*--------------------------------------------
   fv
--------------------------------------------*/
.fv{
   position: relative;
   height: 690px;
   background: url("../img/bg_dots.png") center;
   display: flex;
   justify-content: center;
   align-items: center;
   border-top: 10px solid #000;
   border-bottom: 10px solid #000;
}
.fv-img img{
   display: block;
   max-width: 100%;
   height: auto;
}

@media screen and (max-width: 767px){
   .fv{
      padding: 0 15px;
      height: 450px;
      border-width: 6px;
      background-size: 15%;
   }
}
/*--------------------------------------------
   radio9
--------------------------------------------*/
.radio9{
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   background: url("../img/bg_star.png") no-repeat center;
   padding: 90px 70px;
   border-bottom: 10px solid #000;
}
.radio9::after{
   position: absolute;
   top: -30px;
   left: calc(50% - 200px);
   display: block;
   content: "";
   width: 44px;
   height: 45px;
   background: url("../img/img_star.png") no-repeat;
   background-size: cover;
}
@media screen and (max-width: 950px){
   .radio9{
      background-size: 95%;
   }
}
@media screen and (max-width: 767px){
   .radio9{
      padding: 60px 20px;
      border-width: 6px;
   }
   .radio9::after{
      top: -22px;
      left: calc(50% - 100px);
      width: 30px;
      height: 31px;
   }
   .radio9-img{
      width: 70%;
      max-width: 400px;
      margin: auto;
   }
}
/*--------------------------------------------
   about
--------------------------------------------*/
.about{
   text-align: center;
   color: #fff;
   padding: 105px 20px 200px;
   background: var(--pink);
}
.about-tit{
   margin: 0;
   text-align: center;
}
.about-text{
   padding: 35px 0 60px;
   margin: 0;
   line-height: 1.8;
   background: url("../img/about_star.png") center 40px no-repeat;
}
@media screen and (max-width: 960px){
   .about-text{
      background-size: 100%;
   }
}
.about-btn{
   margin: auto;
}
.about-btn a{
   font-size: 22px;
}

@media screen and (max-width: 767px){
   .about{
      padding: 80px 20px 190px;
   }
   .about-tit{
      max-width: 300px;
      display: block;
      margin: auto;
   }
   .about-text{
      padding: 15px 0 40px;
   }
   .about-btn a{
      width: 100%;
      max-width: 350px;
      font-size: 16px;
      padding: 12px 20px 12px 25px;
   }
   .about-btn a::after{
      margin-left: 0;
   }
}

@media screen and (max-width: 409px){
   .about-btn a{
      font-size: 15px;
      padding: 12px 16px 12px 15px;
   }
}
@media screen and (max-width: 360px){
   .about-btn a{
      padding: 12px 16px 12px 12px;
   }
}

/*--------------------------------------------
   contents
--------------------------------------------*/
.contents{
   position: relative;
   top: -100px;
   margin-bottom: -100px;
   padding: 100px 20px;
   text-align: center;
   background: url("../img/bg_stripes.png") center;
   border-radius: 45px 45px 0 0;
   /*background-image: repeating-linear-gradient(-45deg, #c70079, #c70079 4px, transparent 4px, transparent 14px);*/
   border-bottom: 10px solid #000;
}
.contents-img{
   display: block;
   margin: auto auto 70px;
}


#tab-area{
   max-width: 870px;
   margin: auto;
   text-align: left;
}
.tab-nav{
   display: flex;
   gap: 10px;
   overflow-x: auto;
   white-space: nowrap;
   padding-bottom: 10px;
   margin-bottom: 24px;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: thin;
   margin-bottom: 120px;
}
.tab-btn{
   display: inline-block;
   padding: 7px 30px;
   color: #000;
   font-size: 20px;
   font-weight: 600;
   letter-spacing: 1px;
   border: 5px solid var(--pink);
   cursor: pointer;
   background: #fff;
   font-family: "Noto Sans JP", sans-serif;
   border-radius: 50px;
   box-shadow: 6px 5px 0 var(--pink);
}
.tab-btn .year-unit{
   font-size: .9em;
}
.tab-btn.active{
   color: #fff;
   background: var(--pink);
   border-color: #fff;
}
.tab-content{
   display: none;
   padding: 20px 30px 80px;
   border: 1px solid #ccc;
   margin-top: 10px;
   background: #fff;
   border: 6px solid #000;
   border-radius: 30px;
   
}
.tab-content.active{
   display: block
}
.tab-content__year{
   position: relative;
   top: -91px;
   left: 10px;
   margin-bottom: -60px;
   font-size: 26px;
   font-weight: 600;
   background: url("../img/label_fy.png") no-repeat;
   background-size: cover;
   width: 262px;
   height: 71px;
   padding-top: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.article-list__item{
   padding: 0 50px;
}
.article-list__item+.article-list__item{
   margin-top: 70px;
   padding-top: 40px;
   border-top: 1px solid var(--pink);
}
.article__title{
   position: relative;
   text-align: center;
   font-size: 45px;
   font-weight: 600;
   line-height: 120%;
   padding-top: 90px;
   margin: 0 0 30px;
}
.article__title::before{
   position: absolute;
   left: -30px;
   top: 0;
   content: "";
   display: block;
   background: url("../img/article_yume.png?v=2");
   background-size: cover;
   width: 139px;
   height: 100px;
}
.article__sub-title{
   font-size: .85em;
}
.article__body{
   background: #f4cce4;
   border-radius: 20px;
   padding: 30px 30px 40px;
} 
.article__thumb{
   background: #eee;
   border-radius: 20px;
   overflow: hidden;
   /*aspect-ratio: 16 / 9;*/
}
.article__thumb img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center; /* 上下左右中央 */
   display: block;
}
.article__text{
   line-height: 180%;
}
.article__btn{
   display: block;
   text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
   .article-list__item {
      padding: 0 10px;
   }
   .article__title{
      font-size: 40px;
   }
}
@media screen and (max-width: 767px){
   .contents{
      padding: 60px 15px;
      border-width: 6px;
      border-radius: 30px 30px 0 0;
      background-size: 15px;
   }
   .contents-img{
      max-width: 380px;
      display: block;
      margin: auto auto 20px;
   }
   .tab-content{
      padding: 40px 20px 50px;
      border-width: 3px;
      border-radius: 20px;
   }
   .article__title{
      font-size: 20px;
      padding-top: 55px;
      margin-bottom: 20px;
   }
   .article__title::before{
      width: 80px;
      height: 58px;
      left: -8px;
   }
   .article-list__item{
      padding: 0;
   }
   .tab-nav{
      gap: 8px;
      margin-bottom: 70px;
   }
   .tab-btn{
      font-size: 15px;
      border-width: 3px;
      padding: 6px 18px;
      box-shadow: 4px 4px 0 var(--pink);
   }
   .tab-content__year{
      top: -78px;
      width: 140px;
      height: 38px;
      font-size: 18px;
   }
   .article__body{
      border-radius: 16px;
      padding: 25px 20px 30px;
   }
   .article-list__item+.article-list__item{
      margin-top: 40px;
      padding-top: 25px;
   }
   .article__btn a{
      padding: 10px 25px 10px 30px;
   }
}

/*--------------------------------------------
   footer
--------------------------------------------*/
.logo-yume{
   padding: 200px 0;
   text-align: center;
}
.footer{
   box-shadow: 0 5px 15px rgba(0,0,0,.15);
   margin: 10px;
   padding: 40px 20px;
}
.footer-inner{
   max-width: 870px;
   margin: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.footer-info{
   color: #231815;
   text-align: left;
   font-size: 16px;
   line-height: 140%;
   display: flex;
}
.footer-info p a{
   color: #231815;
}
.footer-info p+p{
   border-left: 1px solid #231815;
   margin-left: 10px;
   padding-left: 10px;
}
.footer-logo{
   flex-shrink: 0;
}
@media screen and (max-width: 767px){
   .logo-yume{
      padding: 80px 0;
   }
   .logo-yume img{
      max-width: 180px;
      display: block;
      margin: auto;
   }
   .footer{
      padding: 20px 20px;
   }
   .footer-info{
      display: block;
      font-size: 14px;
      align-items: center;
      justify-content: center;
   }
   .footer-info p{
      margin: 0;
      padding: 0;
   }
   .footer-info p+p{
      margin: 5px 0 0;
      padding: 0;
      border: 0;
   }
   .footer-logo{
      text-align: center;
   }
}