@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : layout.css
Description : レイアウト用CSS
===================================================================== */


/* ==========================================================
	共通
========================================================== */

.wrapper {
    font-family: 'RocknRoll One', "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
    font-size: 16px;
}


/*メインビジュアル背景*/

.mv {
    background-color: #ffeb3b;
    /*	画像はこちら↓
		background: url(../images/bg.png) repeat center;*/
}


/*アクセントカラー（背景色）*/

.nav {
    background-color: #ff9c07;
}


/*アクセントカラー（文字色）*/

.ttl_h3,
.wrapper .txt_link,
.wrapper b.highlight,
.cast_name1 {
    color: #e50012;
}

.popup_close {
    border-color: #e50012;
}

img {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .wrapper {
        font-size: 18px;
    }
}


/* ==========================================================
	header
========================================================== */


/*メニューの幅(SP)
　※calc(### / 750 * 100%)の###部分を変更してください*/

.nav ul {
    width: calc(1200 / 750 * 100%);
    justify-content: space-around;
    padding: 1em 0;
}

.nav ul li {
    position: relative;
}


/*メニューの文字色*/

.nav a {
    color: #fff;
}

.nav ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    padding: 0.5rem 0;
    font-size: 100%;
    line-height: 1.8;
    text-align: center;
}

.nav ul li a span {
    position: relative;
    z-index: 10;
}

.nav ul li a span:hover {
    color: #e50012;
}

.nolink a {
    pointer-events: none;
    color: #666 !important;
}

.nav a:after {
    color: #ffeb3b;
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    background: url(../images/logo02.png) no-repeat center/contain;
    opacity: 0;
    z-index: 1;
    background-size: contain;
}

.nav a:hover:after {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    opacity: 1;
    animation: r1 1s linear infinite;
}

@keyframes r1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media screen and (min-width: 768px) {
    .nav ul li a {
        font-size: 2.8rem;
    }
}


/* ==========================================================
	コンテンツ
========================================================== */


/*コンテンツ外側の背景*/

#main {
    /*	画像はこちら↓ */
    background-color: #ffeb3b;
}


/*コンテンツ背景*/

.contents {
    /* background-color: #fff; */
}


/*各セクションの背景*/

#menu1,
#menu3 {
    background-color: #ffeb3b;
    position: relative;
}

.menu1::before {
    position: absolute;
    content: '';
    background: url(../images/wave_bottom.png) repeat-x center;
    bottom: -20px;
    left: 0;
    width: 100%;
    padding-top: calc(100 / 750 * 100%);
    z-index: 10;
}

#menu2 {
    background: url(../images/bg.png) repeat center;
    background-color: #fff6d1;
    padding-bottom: calc(100 /750 * 100%);
}

#menu4 {
    position: relative;
    background-color: #ffeb3b;
    padding-bottom: calc(100 /750 * 100%);
}


/* .menu4::before{
	position: absolute;
	content: '';
	background: url(../images/wave_top.png) repeat-x center;
    top: -20px;
    left: 0;
    width: 100%;
    padding-top: calc(60 / 750 * 100%);
	z-index: 10;
} */

#menu5 {
    background-color: #ffc107;
    padding-bottom: calc(100 /750 * 100%);
}


/*スライダーの矢印ボタン：ホバー*/


/*ポップアップのクローズボタン：ホバー*/

.slick-arrow:hover,
.popup_close:hover {
    background-color: #000;
}


/*ポップアップのクローズボタン：ホバー*/

.popup_close:hover {
    border-color: #000;
}

.captxt {
    font-size: 120%!important;
    font-weight: 700;
    color: #e50012!important;
}

.scaptxt {
    font-size: 90%!important;
    font-weight: 700;
    color: #e50012!important;
}

.catch-txt {
    position: relative;
    text-align: center;
    font-weight: 700;
    line-height: 3.6rem;
    margin: 1rem;
    background-color: #fff;
    border: 4px solid #000;
    padding: 2em;
    border-radius: 20px;
}


/* .catch-txt::before {
	position: absolute;
    content: '';
    background: url(../images/logo01.png) no-repeat right;
    top: 0;
    right: 0;
    margin-right: calc(-40 / 750 * 100vW);
    margin-top: calc(-70/ 750 * 100vW);
    width: 25%;
    padding: calc(100/ 750 * 100%);
    z-index: 10;
    background-size: contain;
}

.catch-txt::before {
	animation: r1 10s linear infinite;
  }

  @keyframes r1 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  } */

.catch-txt img {
    margin-top: 1em;
}

.cast_btn_6 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cast_btn_6 li {
    width: calc(310 / 650 * 100%);
    margin-top: calc(40 / 650 * 100%);
}

@media screen and (min-width: 768px) {
    /*各セクションの背景*/
    #menu1,
    #menu3 {
        background-color: #ffeb3b;
    }
    .menu1::before {
        bottom: -20px;
        padding-top: calc(20 / 750 * 100%);
    }
    #menu2 {
        background: url(../images/bg.png) repeat center;
        background-color: #fff6d1;
        padding: 8rem 0;
    }
    #menu4 {
        background-color: #ffeb3b;
        padding-bottom: calc(60 /1024 * 100%);
    }
    .menu4::before {
        top: -20;
        padding-top: calc(20 / 750 * 100%);
    }
    #menu5 {
        background-color: #ffc107;
        padding: 6rem 0;
    }
    .cast_btn_6 {
        width: 100%;
        margin: auto;
    }
    .cast_btn_6 li {
        width: calc(150 / 1024 * 100%);
        margin-top: 0;
    }
    .catch-txt {
        width: calc(800 / 1000 * 100%);
        margin: 1rem auto 0;
    }
    .catch-txt img {
        width: 80%;
        margin: 1em auto;
    }
    .catch-txt::before {
        margin-right: calc(-20 / 750 * 100vW);
        margin-top: calc(-40/ 750 * 100vW);
    }
}


/* ==========================================================
	section.menu1
========================================================== */

.oa_time_top {
    text-align: center;
    line-height: 1.4;
    background: #204495;
    font-size: 4rem;
    color: #fff;
    padding: 0.4em 0 0.6em;
}

.banner_list li {
    padding: 2em 0 0;
}

.banner_list li:nth-child(2) {
    padding: 0 0 2em;
}

.ttl_img img {
    width: 100%;
    margin: 0 auto 2em;
}

@media screen and (min-width: 768px) {
    .ttl_img {
        width: calc(658 / 1024 * 100%);
        margin: 0 auto;
    }
    .ttl_img img {
        margin: 0 auto 3em;
    }
}


/* ==========================================================
	section.menu2
========================================================== */

.oa_time {
    color: #000;
    text-align: center;
    font-size: 130%;
    font-weight: bold;
    margin: 0 auto;
    line-height: 1.6;
}

.oa_title {
    color: #ea5521;
    text-align: center;
    font-size: 130%;
    font-weight: bold;
    margin: 0.5em auto;
    line-height: 1.6;
}

.notes {
    font-size: 80%;
    color: #000;
    font-weight: normal;
    display: block;
    text-align: center;
}

.oa_number {
    font-weight: bold;
    font-size: 10rem;
    position: absolute;
    left: 0;
    top: -6px;
}

.oa_title {
    position: relative;
    margin: 0 auto;
    line-height: 1.6;
}

.oa_box {
    border: 2px solid #204495;
    border-radius: 10px;
    background-color: #fff;
    padding: 5rem;
    line-height: 2;
    margin-top: 4em;
    position: relative;
}

.oa_box::before {
    position: absolute;
    content: '';
    background: url(../images/logo01.png) no-repeat right;
    top: 0;
    right: 0;
    /* left: 0; */
    margin-right: calc(-25 / 750 * 100vW);
    margin-top: calc(-60 / 750 * 100vW);
    width: 25%;
    padding-top: 25%;
    z-index: 10;
    background-size: contain;
}

.oa_box::before {
    animation: r1 10s linear infinite;
}

@keyframes r1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

.oa_gest {
    background-color: #204495;
    color: #fff;
    padding: 0.5em 1em;
    margin-bottom: 1em;
    font-size: 110%;
    font-weight: bold;
}

.oa_title span {
    font-size: 80%;
    color: #f08e6c;
    line-height: 1.6 !important;
    display: block;
    margin: 1em 0;
}

.oa_text p {
    margin-bottom: 2em;
}

.oa_photo img {
    margin-bottom: 1em;
}

.inside_story {
    background-color: #d1e1ff;
    padding: 1em;
    border-radius: 20px;
}

.inside_story_title {
    background-color: #204495;
    color: #fff;
    border-radius: 20px;
    padding: 0.5em 1em;
    display: inline-block;
    margin-bottom: 0.5em;
}

.title_ambassador {
    color: #ea5521;
    text-align: center;
    font-size: 130%;
    font-weight: bold;
    margin: 0 auto;
    padding-top: 2em;
    text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 0px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF, 0-2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;
}

@media screen and (min-width: 768px) {
    .oa_time,
    .oa_title {
        font-size: 150%;
    }
}


/* ==========================================================
	0527回　追加
========================================================== */

.twitter0527 {
    /* font-size: 1.6rem; */
}

.twitter0527 p {
    margin-bottom: 2em;
}

@media screen and (min-width: 768px) {
    .large_banner li {
        width: calc(480 / 1024 * 100%);
    }
    .oa_box {
        max-width: 800px;
        margin: 0 auto;
        padding: 30px 40px;
        border: 4px solid #204495;
    }
    .oa_box::before {
        width: 18rem;
        padding-top: 18rem;
        margin-top: -7.8rem;
        margin-right: -5.6rem;
    }
    .oa_gest {
        padding: 0.5em 1em;
    }
    .oa_photo {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .oa_photo li {
        width: calc(340 / 734 * 100%);
        margin-right: calc(11 / 734 * 100%);
    }
    .banner_list li {
        padding: 2em 0;
    }
    .banner_list li:nth-child(2) {
        padding: 2em 0;
    }
}


/* ==========================================================
	section.menu4
========================================================== */

#menu4 {
    padding-bottom: calc(320 /750 * 100%);
}

.menu4 {
    position: relative;
}

.menu4::before {
    position: absolute;
    content: '';
    background: url(../images/iwao.png) no-repeat bottom center;
    background-size: contain;
    bottom: 0;
    left: 0;
    bottom: 0;
    left: 0;
    margin-left: calc(60 / 750 * 100vW);
    margin-bottom: calc(0 / 750 * 100vW);
    padding: calc(150/ 750 * 100%);
    z-index: 10;
}

.menu4::after {
    position: absolute;
    content: '';
    background: url(../images/goto.png) no-repeat bottom center;
    background-size: contain;
    bottom: 0;
    right: 0;
    margin-right: calc(60 / 750 * 100vW);
    margin-bottom: calc(0 / 750 * 100vW);
    padding: calc(150/ 750 * 100%);
    z-index: 10;
}

@media screen and (min-width: 768px) {
    #menu4 {
        padding-bottom: calc(100 /750 * 100%);
    }
    .menu4::before {
        position: absolute;
        content: '';
        background: url(../images/iwao.png) no-repeat bottom left;
        background-size: contain;
        bottom: 0;
        left: 0;
        bottom: 0;
        left: 0;
        margin-left: calc(30 / 750 * 100vW);
        margin-bottom: calc(0 / 750 * 100vW);
        padding: calc(80/ 750 * 100%);
        z-index: 10;
    }
    .menu4::after {
        position: absolute;
        content: '';
        background: url(../images/goto.png) no-repeat bottom right;
        background-size: contain;
        bottom: 0;
        right: 0;
        margin-right: calc(44 / 750 * 100vW);
        margin-bottom: calc(0 / 750 * 100vW);
        padding: calc(80/ 750 * 100%);
        z-index: 10;
    }
}

@media screen and (min-width: 768px) {
    .pc {
        display: inline;
    }
    .sp {
        display: none;
    }
}

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


/* ==========================================================
	twitter
========================================================== */

.movie {
    border: 4px solid #000;
}

.twitter {
    border: 4px solid #ff9c07;
}

.twitter_box iframe {
    width: 100% !important;
}

.twitter-timeline {
    overflow-y: scroll;
}


/* ==========================================================
	youtube
========================================================== */

.youtube_movie {
    width: 90%;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .youtube_movie {
        width: 50%;
        margin: 0 auto;
    }
}


/* ==========================================================
	バックナンバー
========================================================== */

.backnumber_list {
    border-bottom: 2px dashed #204495;
    margin-bottom: 1em;
}

.backnumber_list a {
    color: #ea5521;
}

.backnumber_list a:hover {
    color: #ff9c07;
}

.backnumber_list_oa::before {
    content: '●';
    width: 100%;
    background-size: contain;
    margin-right: 0.5em;
}

@media screen and (min-width: 768px) {
    #backnumber {
        padding: 5rem 0;
    }
}