@charset "utf-8";

/* 共通 */
html { scroll-behavior: smooth;}
body{ background-color: #231815; color: #fff; font-family: "Shippori Mincho", serif;}
@media (min-width: 768px) {
	body{ min-width: 1000px;}
}
@media (max-width: 767.98px) {
	body{ padding: 0;}
}


@keyframes fadeIn {
    0% { opacity: 0;}
    100% { opacity: 1;}
}
@keyframes slideInLeft {
    0% { opacity: 0; transform: translateX(-100px);}
    100% { opacity: 1; transform: translateX(0);}
}
@keyframes revealFromLeft {
    0% { opacity: 0; clip-path: inset(0 100% 0 0);}
	50% { opacity: 1;}
    100% { opacity: 1; clip-path: inset(0 0 0 0);}
}
@keyframes revealTextFromTop {
    0% {  opacity: 0; clip-path: inset(0 0 100% 0);}
    100% {  opacity: 1; clip-path: inset(0 0 0 0);}
}
@keyframes fadeIn {
    from { opacity: 0;}
    to { opacity: 1;}
}




@keyframes slideDownRepeat {
  0% { opacity: 0; clip-path: inset(0 0 100% 0);}
  10% { opacity: 1;}
  100% { opacity: 1; clip-path: inset(0 0 0 0);}
}


/* メイン */
@media (min-width: 768px) {
	.movie_box{ width: 100%; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center;}
	.movie_box video{ width: 100%; position: relative; z-index: 1;}
	.movie_box .logo{ width: 100%; position: absolute; top: 9%; left: calc(50% - 50%); z-index: 2; opacity: 0; animation: fadeIn 0.5s ease-in-out 0.5s forwards;}
	.movie_box .logo img{ width: 24%;}
	.movie_box .text_box{ width: 34%; margin: 0 auto; position: absolute; left: calc(50% - 17%); z-index: 2; text-align: left;}
	.movie_box .text{ opacity: 0; clip-path: inset(0 0 100% 0); animation: revealTextFromTop 1.5s linear forwards;}
	.movie_box .text.text1{ margin: 0 0 25px 0; display: block; animation-delay: 1.0s;}
	.movie_box .text.text1 img{ width: 90%;}
	.movie_box .text.text2{ margin: 0 0 25px 0; display: block; animation-delay: 2.5s;}
	.movie_box .text.text2 img{ width: 45%;}
	.movie_box .text.text3{ margin: 0; display: block; animation-delay: 4.0s;}
	.movie_box .text.text3 img{ width: 100%;}
	
	.scroll_box { position: absolute; right: 0; bottom: 35px; left: 0; display: inline-block; width: 100%; margin: 0 auto; justify-content: center; align-items: center; z-index: 100; color: #fff;}
	.scroll_box p{ color: #fff;}
	.arrow img { width: 10px !important; opacity: 0; clip-path: inset(0 0 100% 0); animation: slideDownRepeat 2s infinite;}
}
@media (min-width: 1000px) {
	.movie_box .logo{ top: 5vw;}
}
@media (max-width: 767.98px) {
	.movie_box{ width: 100vw; height: 90vh; position: relative; overflow: hidden; margin: 0; background-image: url("../img/main_sp.png"); background-position: center; background-size: cover; display: flex; justify-content: center; align-items: center;}
	.movie_box video{ display: none;}
	.movie_box .logo{ width: 100%; position: absolute; top: 8%; left: calc(50% - 50%); z-index: 2; opacity: 0; animation: fadeIn 0.5s ease-in-out 0.5s forwards;}
	.movie_box .logo img{ width: 70%; max-width: 230px;}
	.movie_box .text_box{ width: 90%; margin: 0 auto; position: relative; left: 15px; z-index: 2; text-align: left; display: flex; justify-content: center; align-items: center;}
	.movie_box .text{ opacity: 0; animation: revealTextFromTop 1.5s linear forwards;}
	.movie_box .text_box>div{ max-width: 360px;}
	.movie_box .text.text1{ margin: 0 0 25px 0; display: block; animation-delay: 1.0s;}
	.movie_box .text.text1 img{ width: 80%;}
	.movie_box .text.text2{ margin: 0 0 25px 0; display: block; animation-delay: 2.5s;}
	.movie_box .text.text2 img{ width: 40%;}
	.movie_box .text.text3{ margin: 0; display: block; animation-delay: 4.0s;}
	.movie_box .text.text3 img{ width: 89%;}
	
	.scroll_box { position: absolute; right: 0; bottom: 10px; left: 0; display: inline-block; width: 100%; margin: 0 auto; justify-content: center; align-items: center; z-index: 100; color: #fff;}
	.scroll_box p{ color: #fff;}
	.arrow img { width: 8px !important; opacity: 0; clip-path: inset(0 0 100% 0); animation: slideDownRepeat 2s infinite;}
}


/* リード文 */
@media (min-width: 768px) {
	.lead_box{ margin: 100px 0; text-align: center; font-size: 20px; line-height: 2.8;}
	.lead_box .lead_p1{ margin: 0 0 40px 0;}
	.lead_box .lead_p2{ margin: 0;}
}
@media (max-width: 767.98px) {
	.lead_box{ margin: 50px 0; padding: 0 15px; text-align: center; font-size: 14px; line-height: 2.4;}
	.lead_box .lead_p1{ margin: 0 0 40px 0;}
	.lead_box .lead_p2{ margin: 0;}
}


/* メニュー */
@media (min-width: 768px) {
	.menu_box ul{ display: flex; justify-content: center;}
	.menu_box ul li{ margin: 0 5px;}
	.menu_box ul img{ width: 300px;}
}
@media (min-width: 1300px) {
	.menu_box ul img { width: 285px;}
}
@media (max-width: 767.98px) {
	.menu_box ul{ display: flex; justify-content: center; flex-wrap: wrap;}
	.menu_box ul li{ margin: 0 5px 20px 5px;}
	.menu_box ul li:last-child{ margin: 0;}
	.menu_box ul img{ width: 300px}
}


/* youtube埋め込み */
@media (min-width: 768px) {
	.top_youtube{ margin: 100px 0; text-align: center;}
}
@media (max-width: 767px) {
	.top_youtube{ position: relative; width: calc(100% - 30px); padding: 56.25% 0 0; margin: 50px 15px; text-align: center;}
	.top_youtube iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
}


/* メニュー */
@media (min-width: 768px) {
	.menu_title{ background-image: url("../img/back.jpg"); background-size: cover; background-position: center; width: 100%; height: calc(100vw * 1125 / 2000); display: flex; justify-content: center; align-items: center;}
	.menu_title2{ background-image: url("../img/back2.jpg");}
	.menu_title img{ width: 24vw; min-width: 230px;}
}
@media (max-width: 767.98px) {
	.menu_title{ background-image: url("../img/back.jpg"); background-size: cover; background-position: center; width: 100%; height: 320px; display: flex; justify-content: center; align-items: center;}
	.menu_title2{ background-image: url("../img/back2.jpg");}
	.menu_title h2{ text-align: center; width: 100%;}
	.menu_title img{ width: 60%; max-width: 250px;}	
}


/* 無料招待 */
@media (min-width: 768px) {
	.contents1{ padding: 100px 0;}
	.contents1_title{ text-align: center;}
	.contents1_title img{ width: 700px;}
	.contents1_data{ text-align: center; margin: 32px 0 0 0;}
	.contents1_data img{ width: 600px;}
	.contents1_title2{ text-align: center; margin: 175px 0 44px 0!important;}
	.contents1_title2 img{ width: 280px;}
	.contents1_title3{ text-align: center; margin: 44px 0 10px 0!important;}
	.contents1_title3 img{ width: 160px;}
	.contents1_title4{ color: #ebca1b; font-size: 19px; border-top: 1px solid #ebca1b; border-bottom: 1px solid #ebca1b; display: inline-block; width: 220px; padding: 3px 0; text-align: center; font-family: "Zen Kaku Gothic New", serif; font-weight: 500; font-weight: bold; margin: 0 0 18px 0;}
	
	.contents2_title,.contents3_title{ margin: 0 0 22px 0;}
	.contents2_lead{ font-size: 18px; width: 750px; margin: 0 0 45px 0; line-height: 2.0;}

	.p14{ font-size: 18px; text-align: center; margin: 0 0 50px 0;}
	
	.actor_list{ display: flex; justify-content: center;}
	.actor_list li{ margin: 0 8px;}
	.actor_list li:nth-child(1) img,.actor_list li:nth-child(2) img,.actor_list li:nth-child(3) img{ width: 170px;}
	.actor_list li:nth-child(4) img{ width: 326px;}
	
	.memo_box{ padding: 20px; border: 1px solid #fff; width: 750px; margin: 0 auto; font-size: 16px; font-family: "Zen Kaku Gothic New", serif; font-weight: 500;}
	.memo_box2{ margin: 0 auto 50px;}
	.memo_box h5{ color: #fff!important; font-size: 18px; margin: 0 0 5px 0!important; display: block; font-weight: bold;}
	.memo_box .memo_h52{ margin: 25px 0 10px 0!important;}
	.memo_box p{ margin: 0; line-height: 1.8;}
	.memo_box .p2{ line-height: 1.2; font-size: 16px;}
	.memo_box .tel{ font-size: 36px;}
	
	.data_box{ width: 750px; margin: 0 auto 100px;}
	.data1{ font-size: 28px; letter-spacing: 2px; margin: 0 0 5px 0; font-family: "Shippori Mincho", serif;}
	.data1 span{ font-size: 38px;}
	.data2{ line-height: 1.8; margin: 0; font-size: 17px;}
	.data3{ font-size: 20px; font-family: "Shippori Mincho", serif;}
	.data3 small{ font-size: 15px; font-family: "Zen Kaku Gothic New", serif; font-weight: 500;}
	.data_memo{ font-size: 15px; font-family: "Zen Kaku Gothic New", serif; font-weight: 500; margin: 0;}

	.btn_yellow{ text-align: center; margin: 0 0 46px 0;}
	.btn_yellow span{ position: relative; height: 100%; display: inline-block;}
	.btn_yellow img{ width: 550px; transition: transform 1.5s ease;}
	.btn3{ margin: 0 0 24px 0!important;}
	.btn1>a:hover img{ content: url('../img/btn1_on.png');}
	.btn2>a:hover img{ content: url('../img/btn2_on.png');}
	.btn3>a:hover img{ content: url('../img/btn3_on.png');}
	.btn4>a:hover img{ content: url('../img/btn4_on.png');}
	.p_center{ text-align: center; margin: 0; position: relative; top: -25px; font-size: 16px; font-family: "Zen Kaku Gothic New", serif; font-weight: 500;}
	
	.contents2_flex{ display: flex; justify-content: center; padding: 100px 0; flex-wrap: wrap;}
	.contents2_flex>div:first-child{ width: 100%; text-align: center; padding: 0;}
	.contents2_flex>div:first-child img{ width: 175px;}
	.contents2_flex>div:last-child{ width: 100%; padding: 60px 0 0 0;}
	.contents2_flex>div:last-child>div{ width: 750px; margin: 0 auto;}
	.contents2_flex>div:last-child h3 img{ width: 500px;}
	.contents2_flex2>div:last-child{ padding: 60px 0 0 0;}
	.contents2_flex2>div:last-child h3 img{ width: 710px;}
	
	.contents2_flex .data_box{ margin: 0 0 100px 0; width: 750px; font-family: "Zen Kaku Gothic New", serif; font-weight: 500;}
	.contents2_flex .data_box2{ margin: 0 0 50px 0;}
	.contents2_flex .data_box3{ margin: 0;}
	.contents2_flex .memo_box{ margin: 0 0 50px 0;}
	.contents2_flex .btn_yellow{ text-align: left; margin: 0;}
	
	.border{ text-align: center; margin: 100px 0 0 0;}
	.border img{ width: 1000px;}
	
	.record{ margin: 0 0 50px 0;}
	.record img{ width: 750px;}
	
	.footer_box{ background-color: #830009; text-align: center; font-family: "Zen Kaku Gothic New", serif; font-weight: 500; padding: 40px 0 20px;}
	.footer_box .footer_logo img{ width: 170px;}
	.footer_box .contact{ padding: 17px 0 39px; font-weight: bold; margin: 0; font-size: 15px;}
	.footer_box .copy{ color: #c18084; font-size: 13px; font-weight: bold; margin: 0;}
	
	.page_last{ margin: 0 0 100px 0;}
	
	.over_gray:after{ background-color: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 20px; font-weight: bold; letter-spacing: 2px;}
	.over_gray:after{ content: "Coming Soon";}
	.over_gray2:after{ content: "受付終了しました";}
}
@media (max-width: 767.98px) {
	.contents1{ padding: 50px 15px;}
	.contents1_title{ text-align: center; margin: 0;}
	.contents1_title img{ width: 96%; width: 500px;}
	.contents1_data{ text-align: center; margin: 32px 0 0 0;}
	.contents1_data img{ width: 90%; width: 450px;}
	.contents1_title2{ text-align: center; margin: 60px 0 20px 0!important;}
	.contents1_title2 img{ width: 170px;}
	.contents1_title3{ text-align: center; margin: 44px 0 10px 0!important;}
	.contents1_title3 img{ width: 130px;}
	.contents1_title4{ color: #ebca1b; font-size: 15px; border-top: 1px solid #ebca1b; border-bottom: 1px solid #ebca1b; display: inline-block; width: 156px; padding: 3px 0; text-align: center; font-family: "Zen Kaku Gothic New", serif; font-weight: 500; font-weight: bold; margin: 0 0 18px 0;}
	
	.contents2{ padding: 50px 15px;}
	.contents2_title,.contents3_title{ margin: 0 0 22px 0;}
	.contents2_lead{ font-size: 13px; width: 100%; margin: 0 0 40px 0; line-height: 1.8;}

	.p14{ font-size: 14px; text-align: center; margin: 0 0 50px 0;}
	
	.actor_list{ display: flex; justify-content: center; flex-wrap: wrap; margin: 0;}
	.actor_list li{ margin: 0 8px 20px;}
	.actor_list li:last-child{ margin: 0 8px 0;}
	.actor_list li:nth-child(1) img,.actor_list li:nth-child(2) img,.actor_list li:nth-child(3) img{ width: 150px;}
	.actor_list li:nth-child(4) img{ width: 300px;}
	
	.memo_box{ padding: 15px; border: 1px solid #fff; width: 100%; margin: 0 auto; font-size: 13px; font-family: "Zen Kaku Gothic New", serif; font-weight: 500;}
	.memo_box2{ margin: 0 auto 50px;}
	.memo_box h5{ color: #fff!important; font-size: 14px; margin: 0 0 5px 0!important; display: block; font-weight: bold;}
	.memo_box .memo_h52{ margin: 15px 0 5px 0!important;}
	.memo_box p{ margin: 0; line-height: 1.8;}
	.memo_box .p2{ line-height: 1.6;}
	.memo_box .tel{ font-size: 26px; color: #ebca1b; line-height: 1.0;}
	
	.data_box{ width: 100%; margin: 0 auto 50px;}
	.data1{ font-size: 19px; letter-spacing: 2px; margin: 0 0 5px 0; font-family: "Shippori Mincho", serif;}
	.data1 span{ font-size: 24px;}
	.data2{ line-height: 1.8; margin: 0;}
	.data3{ font-size: 19px; font-family: "Shippori Mincho", serif;}
	.data3 small{ font-size: 12px; font-family: "Zen Kaku Gothic New", serif; font-weight: 500;}
	.data_memo{ font-size: 12px; font-family: "Zen Kaku Gothic New", serif; font-weight: 500; margin: 0;}

	.btn_yellow{ text-align: center; margin: 0 0 46px 0;}
	.btn_yellow span{ position: relative; height: 100%; display: inline-block;}
	.btn_yellow img{ width: 100%; max-width: 400px; transition: transform 1.5s ease;}
	.btn3{ margin: 0 0 24px 0!important;}
	.btn1>a:hover img{ content: url('../img/btn1_on.png');}
	.btn2>a:hover img{ content: url('../img/btn2_on.png');}
	.btn3>a:hover img{ content: url('../img/btn3_on.png');}
	.btn4>a:hover img{ content: url('../img/btn4_on.png');}
	.p_center{ text-align: left; position: relative; top: -25px; font-size: 14px; font-family: "Zen Kaku Gothic New", serif; font-weight: 500; max-width: 400px; margin: 0 auto;}
	
	.contents2_flex{ display: flex; justify-content: center; padding: 0; flex-wrap: wrap;}
	.contents2_flex>div:first-child{ width: 100%; text-align: center; padding: 0;}
	.contents2_flex>div:first-child img{ width: 130px;}
	.contents2_flex>div:last-child{ width: 100%; padding: 50px 0 0;}
	.contents2_flex>div:last-child>div{ width: 100%;}
	.contents2_flex>div:last-child h3 img{ width: 100%; max-width: 400px;}
	.contents2_flex2>div:last-child h3 img{ width: 100%;}
	
	.contents2_flex .data_box{ margin: 0 0 50px 0; width: 100%; font-family: "Zen Kaku Gothic New", serif; font-weight: 500;}
	.contents2_flex .data_box2{ margin: 0 0 50px 0;}
	.contents2_flex .memo_box{ margin: 0 0 50px 0;}
	.contents2_flex .btn_yellow{ text-align: center; margin: 0;}
	
	.border{ text-align: center; margin: 50px 0;}
	.border img{ width: 96%;}
	
	.record{ margin: 0 0 50px 0;}
	.record img{ width: 100%; max-width: 700px;}
	
	.footer_box{ background-color: #830009; text-align: center; font-family: "Zen Kaku Gothic New", serif; font-weight: 500; padding: 40px 0 20px;}
	.footer_box .footer_logo img{ width: 150px;}
	.footer_box .contact{ padding: 20px 0 39px; font-weight: bold; margin: 0;}
	.footer_box .copy{ color: #c18084; font-size: 11px; font-weight: bold; margin: 0;}
	
	.page_last{ margin: 0;}
	
	.over_gray:after{ background-color: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 20px; font-weight: bold; letter-spacing: 2px;}
	.over_gray:after{ content: "Coming Soon";}
	.over_gray2:after{ content: "受付終了しました";}
}