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

html, body, h1, dd {
	margin:0;
}

h1 {
    /* font-family: 'Montserrat', sans-serif;
    font-family: 'Yomogi', cursive; */
    font-weight: 100;
    padding: 20px 60px;
    font-size: 2.4rem;
    text-align: center;
    
}

h1 span {
    background: linear-gradient(transparent 50%, #d7ebfe 50%);
}


h2 {
    font-size: 1.8rem;
    text-align: left;
    margin-bottom: 0;
}

h2 span {
    background: linear-gradient(transparent 50%, #fbd7fe 50%);
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    margin: 0;
}

/* h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    margin: 0;
    padding-top: 16px;
} */

html {
	font-size: 62.5%;
    overflow-x: hidden;
}

body {
    color: #333;
	/* font-family: 'Roboto', sans-serif; */
    /* font-family: 'Noto Sans JP', sans-serif; */
    font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 1.6rem;
	font-feature-settings: 'palt'; /* プロポーショナルメトリクスを有効にする指定 */
	letter-spacing: 0.05em; /*文字の間隔を指定*/
	-webkit-font-smoothing:antialiased; /*　文字のアンチエイリアス設定(Chrome)　*/
	-moz-osx-font-smoothing:grayscale; /*　文字のアンチエイリアス設定(Firefox)　*/
    /* text-align: center; */
    line-height: 1.5;
    text-align: justify;
    /* font-weight: bold; */
}

a {
	/* color: #595757; */
    color: #333;
	text-decoration: none; /*	デフォルトの下線を非表示にする　*/
}

ul {
	list-style: none; /*  リストの黒丸を消す　*/
    padding: 0;
    text-align: left;
    text-align: justify;
}

li {
    /* padding-top: 5px; */
    /* line-height: 200%; */
    
}

img {
	max-width:100%;
	height: auto;
    pointer-events: none;
    max-height: 220px;
}


/*-----------------------
 * sp_utiyity
 -----------------------*/

 section {
     margin-bottom: 120px;
 }

 .sab-title {
     margin-top: 0;
 }

.hr {
    width: 100%;
    height: 4px;
    border: none;
    border-top: 16px dashed #fff;
}

.pc_img {
    display: none;
}

.pci_img {
    display: none;
}

.adjustment-1 {
    padding: 0 2%;
 }

.fs-14 {
    font-size: 1.4rem;
}

.fs-16 {
    font-size: 1.6rem;
}

/*アニメーション要素のスタイル*/
.animation {
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(100px);
  }

  .animation2 {
	opacity : 0;
	visibility: hidden;
	transition: 2s;
	transform: translateY(100px);
  }

/*アニメーション要素までスクロールした時のスタイル*/
  .active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
  }

/*-----------------------
 * sp_add
 -----------------------*/

.add-01 a {
    font-size: 1.2rem;
    /* text-decoration: underline;
    text-decoration-color: #d7000f; */
    color: gray;
    border-bottom: 1px solid rgb(194, 194, 194);
}

.add-01 {
    text-align: center;
}

.add-02 {
    border: 1px solid #CCCCCC;
    width: 328px;
    margin: 0 auto;
    margin-bottom: 4%;
}

/*-----------------------
 * sp_header-nav
 -----------------------*/

.nav-wrap {
    height: 60px;
    width: 100%;
    /* padding: 0px 15px; */
    background-color: #002a5b;
    position: fixed;
    top: 0;
    z-index: 10;
    display: flex; /*直下の子要素を横並びにする*/
    justify-content: space-around;
  }

.nav-menu {
    display: flex; /*リストを横並びにする*/
    list-style: none; /*unorder listの 中点を消す*/
    padding: 0; /*中点が位置する左余白を消す*/
    margin: 0; /*上下にある余白を消す*/
  }

.nav-menu a {
    color: #fff;
    text-decoration: none;
    display: block; /*幅と高さを持ったブロック要素*/
    line-height: 60px; /*ヘッダーの高さと同じ60px*/
    padding: 0 20px; /*各リスト項目の余白左右20px*/
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    padding: 0 70px;
  }

.nav-menu a:hover {
    color: #d7000f;
}  


/*-----------------------
 * sp_header
 -----------------------*/

.head {
    /* background-color: #f7e56f; */
    background-color: #FFFFB3;
    width: 100%;
    height: auto;
}


/*-----------------------
 * sp_main
 -----------------------*/

 /* section */

 .background-c {
     /* background-color: #f7e56f; */
     background-color: #FFFFB3;
     padding-bottom: 100px;
     margin-bottom: 100px;
 }

 .frame {
     height: auto;
     background-color:#fff;
     width: 95%;
     margin: 0 auto;
     border-radius: 50px 50px 0 0;
     padding-bottom: 20px;
 }

 .frame section:first-child {
    margin-bottom: 0;
 }


 .day {
     /* display: block; */
     text-align: left;
     padding: 24px 0 2px 2%;
     border-bottom: 5px double #FFF;
     width: 72%;
     margin: 0 auto;
     margin-bottom: 6px;
     font-weight: bold;
     font-size: 1.6rem;
 }

 .day span {
    font-size: 1.2rem;
 }

 .theme {
    padding: 20px 4% 0;
 }

 .theme-text {
    padding: 20px 2% 40px;
    font-family: 'Yomogi', cursive;
    font-weight: bold;
 }

 .adjustment-1 li:nth-child(3) {
    text-align: center;
    margin-top: 14px;
 }

 .youtube-w {
    margin: 0 8%;
 }


  .drama {
    padding: 0 5%;
    margin-bottom: 40px;
  }

  .drama p {
    margin-top: 35px;
    text-align: center;
  }

  .youtube-p p {
    font-size: 1.8rem;
 }

 /* section */

 .item-s {
    display: flex;
    justify-content: space-evenly;
    /* border:solid 1px rgb(205, 205, 205); */
    border:solid 1px rgb(240, 240, 240);
    box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
    margin-bottom: 30px;
 }

 .item-s li {
    width: 50%;
    position: relative;
 }

 .item-text {
    padding: 20px;
    font-size: 1.2rem;
 }

 .item-r {
    flex-direction: row-reverse;
 }

 .item-r .fa-circle-chevron-right {
    display: none;
}

.item-text span {
    display: block;
    /* text-align: end; */
    position: absolute;
    bottom: 10%;
    left: 16%;
}

.item-r span {
    left: 13%;
}

 .square_box {
    width: 30vw;
    height: 40vw;
    /* background: rgb(205, 205, 205); */
    background: rgb(246, 245, 245);
  }

  .square_box a {
    display: block;
    width: 100%;
    height: 100%;
  }

 .square_box img {
    height: 40vw;
    width: 100%;
    object-fit: cover;
 }

 .object-fit-c img {
    object-fit: contain;
    padding: 2%;
 }


.topic {
    padding: 0 4%;
}

.topic p {
    padding: 2%;
}


 /* section */

 .ending-frame {
    width: 94%;
    border:solid 1px #f7e56f;
    /* border:solid 1px #FFFF99; */
    border-radius: 50px 50px 0 0;
    margin: 0 auto;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
 }

 .ending {
    padding: 20px 6% 12px;
    text-align: center;
}

.ending h2 {
    text-align: center;
}

.ending ul {
    text-align: center;
}

.ending li:nth-child(2) {
    padding: 20px 0 40px;
    text-align:justify
}

.end-p {
    margin: 0;
    font-size: 1.6rem;
}


 .item-k {
    display: flex;
    padding: 0 5% 40px;
    flex-wrap: wrap;
    justify-content: space-evenly;
 }

 .item-kk {
    /* width: 48%; */
    padding: 1%;
    padding-bottom: 60px;
 }

 .item-kk span {
    display: block;
    text-align: center;
    padding-top: 8px;
 }

 .item-kk a {
    display: block;
    width: 100%;
    height: 90%;
    text-align: center;
 }


 .item-kk span a {
    display: inline;
    border-bottom: 1px solid #333;
    font-size: 1.4rem;
}



 .fa-solid {
    color: #CCCCCC;
 }



/* 動画を囲うdiv */
.youtube {
    position: relative;
    width:100%; /* 横幅は100%にしておく(ここを変えたい場合は実装コード2の方法を確認してください) */
    height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
    padding-top: 56.25%; /* 高さを指定(16:9) */
  }
  
  /* YouTube埋め込み用のiframe */
  .youtube iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }


/*- 吹き出し -*/

.balloon5 {
    width: 100%;
    /* margin: 1.5em 0 30px; */
    overflow: hidden;
    padding-top: 30px;
  }

  .balloon5 .faceicon {
    width: 56px;
    margin-top: 25px;
  }
  
  .balloon5 .faceicon-l {
    margin-right: -90px;
    float: left;
  }

  .balloon5 .faceicon-r {
    margin-left: -90px;
    float: right;
  }
  
  .balloon5 .faceicon img{
    width: 100%;
    height: auto;
    border: solid 3px #d7ebfe;
    border-radius: 50%;
  }

  
  .balloon5 .chatting {
    width: 100%;
  }

  .says {
    /* display: inline-block; */
    position: relative; 
    padding: 17px 13px;
    border-radius: 20px;
    background: #d7ebfe;
  }
  
  .says-l {
    margin: 34px 0 0 70px;
  }
  
  .says-r {
    margin: 34px 70px 0 0;
  }


  .says-l:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 10px; 
    left: -18px;
    border: 8px solid transparent;
    border-right: 12px solid #d7ebfe;
  }

  .says-r:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 10px; 
    right: -18px;
    border: 8px solid transparent;
    border-left: 12px solid #d7ebfe;
  }
  
  .says p {
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
    text-align: justify;
    padding-left: 8px;
  }


 /*-----------------------
 * sp_オススメ
 -----------------------*/

 .next {
    font-family: 'Noto Sans JP', sans-serif;
 }

 .recommend {
    margin: 0 2%;
    margin-bottom: 100px;
}

.recommend-wrap {
    display: flex;
    flex-wrap: wrap;
}

.recommend-item {
    padding: 0 3px 40px;
    width: 50%;
}
.recommend-item a:nth-child(2) {
    display: block;
    width: 100%;
    height: 100%;
}

.caption {
    padding: 8px 3% 0;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4;
}

.caption-c {
    display: block;
    padding-bottom: 6px;
    font-size: 1.2rem;
    text-align: left;
    font-weight: bold;
}


 /*-----------------------
 * sp_エンディング
 -----------------------*/

 .underline_black {
    border-bottom: 1px solid #000000;
 }




/*-----------------------
 * sp_ハンバーガーメニュー
 -----------------------*/

 #hamburger .btn-gNav{
	position: fixed;
	top: 0px;
	left: 15px;
	width: 70px;
	height: 50px;
	z-index: 3;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-transition: all 400ms;
	transition: all 400ms;
	/* background: #8fafc3; */
	/* background: #333; */
	opacity: 0.8;
  }

  
  #hamburger .btn-gNav span{
	display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 1px;
	/* background: #002a5b; */
    background: gray;
  	width: 45%;
  }

  #hamburger .btn-gNav span:nth-child(1) {
	top: 15px;
  }
  #hamburger .btn-gNav span:nth-child(2) {
	top: 23px;
  }
  #hamburger .btn-gNav span:nth-child(3) {
	top: 31px;
  }

  #hamburger .btn-gNav span:nth-child(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
    position: absolute;
    top:5px;
    left:0px;
    color: gray;
    font-size: 1.1rem;
    text-transform: uppercase;
  }


  #hamburger .btn-gNav.open span:nth-child(1) {
	background: gray;
	top: 22px;
	-webkit-transform: rotate(-45deg);
	-moz-transform   : rotate(-45deg);
	transform        : rotate(-45deg);
  }
  #hamburger .btn-gNav.open span:nth-child(2),#hamburger .btn-gNav.open span:nth-child(3){
	top: 22px;
	background :gray;
	-webkit-transform: rotate(45deg);
	-moz-transform   : rotate(45deg);
	transform        : rotate(45deg);
  }

  #hamburger .btn-gNav.open span:nth-child(3)::after {
    content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
    top:-5px;
    left:10px;
    padding-top: 15px;
  }


  #gNav{
	position: fixed;
	overflow-y: scroll;
	top: 0;
	/* right: -100%; */
    left: -100%;
	width: 100%;
	height: 100%; 
	background: rgba(255,255,255,0.95);
	font-size: 16px;
	box-sizing: border-box;
	z-index: 2;
	padding-top: 20px;
	transition: .3s;
  }
  #gNav.open{
	/* right: 0px; */
    left: 0%;
  }
  #gNav .gNav-menu {
	width: 100%;
	height:100%;
	display: flex;
	flex-direction: column;
	text-align: center;
	/*justify-content: center;*/
    padding-top: 30px;
  }

  #gNav .gNav-menu span {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight:100;
    
}

  #gNav .gNav-menu li{
	display: block;
	/* padding : 20px 30px; */
    padding-bottom: 28px;
    padding: 10px 0 28px;
  }

  #gNav .gNav-menu li a{
	text-decoration: none;
    display: block;
    line-height: 28px;
    font-size: 1.4rem;
  }
  
  #gNav .gNav-menu li a:hover {
	opacity: 0.5;
    /* text-decoration: underline; */

  }



 /*-----------------------
 * sp_footer
 -----------------------*/

 .copyright {
    background-color: #eeeeee;
    font-size: 1rem;
    padding: 20px 20px 50px;
    text-align: center;
}

 .f-menu {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    margin-bottom: 100px;
    padding: 10px 5%;
 }


/*-----------------------
* sp_TOPへ戻る
-----------------------*/

#page_top {
   position: fixed;
   bottom: 100px;
   right: 20px;
}
#page_top i {
   /* background-color: #002a5b; */
   background-color: #999;
   color: #fff;
   text-align: center;
   text-decoration: none;
   padding: 20px 20px;
   font-size: 1.4rem;
   opacity: 0.7;
   border-radius: 50%;
}
#page_top i:hover {
   background-color: #f7e56f;
   /* background-color: #666; */
   text-decoration: none;
}



/*--------------------------------------------*/

@media screen and (min-width:768px) {

    body {
        font-size: 1.8rem;
    }

    h1 {
        font-size: 3.4rem;
        padding: 40px 60px;
    }

    h2 {
        font-size: 2.6rem;
    }

    img {
        max-height: 300px;
    }

    /* h1 {
        font-size: 46px;
    }

    h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        padding: 0 20%;
    }

    h4 {
        font-size: 1.6rem;
    } */




    /* .sp_img {
        display: none;
    }

    .pc_img {
        display: block;
    } */



/*-----------------------
 * tb_ハンバーガーメニュー
 -----------------------*/

    #hamburger .btn-gNav span:nth-child(3)::after {
        font-size: 1.5rem;
        /* content:"Menu";
        position: absolute;
        top:5px;
        left:0px;
        color: gray;
        text-transform: uppercase; */
      }


      #hamburger .btn-gNav.open span:nth-child(3)::after {
        /* content:"Close"; */
        /* transform: translateY(0) rotate(-45deg); */
        top:-13px;
        left:10px;
        padding-top: 26px;
      }


      #hamburger .btn-gNav {
        left: 25px;
        width: 100px;
    }

    #hamburger .btn-gNav span:nth-child(2) {
        top: 25px;
    }

    #hamburger .btn-gNav span:nth-child(3) {
        top: 35px;
    }


/*-----------------------
 * tb_head
 -----------------------*/


/*-----------------------
 * tb_main
 -----------------------*/

 /* section */

 .day {
    width: 60%;
    margin-bottom: 12px;
    border-bottom: 12px double #fff;
    font-size: 2.4rem;
 }


 .frame {
    border-radius: 100px 100px 0 0;
 }

 .youtube-p p {
    font-size: 2.4rem;
 }

 .adjustment-1 {
    padding: 0 15%;
}

 .drama {
    padding: 0 15%;
    margin-bottom: 80px;
 }

 .says-l {
    margin: 50px 5% 0 94px;
}

.says-r {
    margin: 50px 94px 0 5%;
}

 .balloon5 {
    padding: 50px 5% 10px;
    margin-bottom: 0;
 }

 .balloon5 .faceicon {
    width: 70px;
}

 .youtube-w {
    margin: 0 12%;
 }


 .topic {
    padding-bottom: 50px;
}


 .item-s {
    margin: 0 10% 30px;
 }

 .item-text {
    padding: 34px;
    font-size: 1.4rem;
}

 .item-text span {
    bottom: 14%;
    left: 36%;
}

 .item-r span {
    left: 0;
    left: 12%;
}

 .square_box {
    height: 30vw;
 }

 .square_box img {
    height: 30vw;
}

 /* section */

 .ending-frame {
    width: 85%;
 }

 .ending li:nth-child(2) {
    padding: 50px 8% 40px;
 }

 .item-k {
    padding: 0 15% 40px;
 }

 .item-kk span a {
    font-size: 1.6rem;
}

 .background-c {
    margin-bottom: 200px;
 }

 .ending {
    padding-top: 60px
}

 /*-----------------------
 * tb_オススメ
 -----------------------*/

 .recommend {
    margin: 0 10%;
}

.recommend-item {
    width: 33%;
}


  /*-----------------------
 * tb_footer
 -----------------------*/
 .f-menu {
    padding: 10px 20%;
}


}



@media screen and (min-width:1100px) {

    /* section {
        width: 980px;
        margin: 0 auto;
        margin-bottom: 240px;
    }

    .sptop_img {
        display: none;
    }

    .sp_img {
        display: none;
    }

    .pc_img {
        display: block;
    }

    .pctop_img {
        display: block;
        width: 100%;
    }

    h2 {
        position: absolute;
        top: 10px;
        left:126px;
        padding: 0 20% 0 10%;
    } */


    .sp_img {
        display: none;
    }

    .pc_img {
        display: block;
    }

    .pci_img {
        display: inline-block;
    }

    section {
        margin-bottom: 200px;
    }
    



/*-----------------------
 * pc_head
 -----------------------*/

 #hamburger .btn-gNav {
    left: 70px;
}


/*-----------------------
 * pc_main
 -----------------------*/

 .day span {
    font-size: 1.6rem;
 }

 .frame {
    border-radius: 200px 200px 0 0;
 }


 .theme-text {
    padding: 80px 2%;
    font-size: 2.8rem;
}

 .drama {
    display: flex;
    padding: 0 10%;
 }

 .youtube {
    margin-top: 50px;
 }

 .youtube-p {
    width: 130%;
 }

 .youtube-p p {
    font-size: 2.8rem;
 }

 .balloon5 {
    padding: 0;
    margin: 0;
    margin-left: 5%;
    margin-top: 78px;
 }

.adjustment-2 {
    padding-left: 4%;
}


 .says-r ,.says-l {
    margin-top: 36px;
}

 .item-wrap {
    display: flex;
    flex-wrap: wrap;
 }


 .item-s {
    width: 48%;
    margin: 0 1% 30px;
 }

 .square_box {
    height: 20vw;
}

.square_box img {
    height: 20vw;
    padding: 2%;
}

.item-r {
    flex-direction: row;
}

.topic {
    padding: 0 6%;
}

.item-text {
    padding: 40px;
    font-size: 1.6rem;
}

.item-text span {
    left: 32%;
}

.item-r .fa-circle-chevron-right {
    display: inline-block;
}

.item-r .fa-circle-chevron-left {
    display: none;
}

.ending-frame {
    border-radius: 200px 200px 0 0;
    width: 70%;
}

.ending li:nth-child(2) {
    padding: 60px 10% 40px;
}

.item-k {
    padding: 0 5% 40px;
    justify-content: center;
}

.item-kk {
    /* width: 24%; */
    width: 40%;
}


/*-----------------------
 * pc_オススメ
 -----------------------*/

 .recommend {
    /* margin: 0 2%; */
    width: 980px;
    margin: 0 auto;
}

.recommend-item {
    width: 25%;
}


 /*-----------------------
 * pc_footer
 -----------------------*/
    .f-menu {
        padding: 10px 30%;
    }
}