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

/* リセットcssここから */
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
	box-sizing: border-box
}
* {
	margin: 0
}
html,
body {
	height: 100%
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%
}
input, button, textarea, select {
	font: inherit
}
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word
}
#root, #__next {
	isolation: isolate
}
/* リセットcssここまで */

html{
	font-family: 'Sawarabi Gothic', sans-serif;
	font-size: 62.5%;
}
body{
	color: #BB5520;
}
/* スクロールバーcss ここから */
::-webkit-scrollbar{
	width: 5px;
}
::-webkit-scrollbar-thumb{
	background-color: #BB5520;
	border-radius: 10px;
}
/* スクロールバーcss ここまで */
img{
	height: auto;
}
a{
	text-decoration: none;
}
/* ローディングアニメーション ここから */
.loading {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	opacity: 1;
	visibility: visible;
}
.loading.is-active {
	opacity: 0;
	visibility: hidden;
}
.loading-animation {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: #FFF;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
}
.loading-animation.is-active {
	opacity: 1;
	visibility: visible;
}
.loader,
.loader:before,
.loader:after {
	border-radius: 50%;
	width: 2em;
	height: 2em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
}
.loader {
	color: #E7E7E7;
	font-size: 10px;
	margin: 20px auto;
	position: absolute;
	top: 53%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2s;
}
.loader:before,
.loader:after {
	content: '';
	position: absolute;
	top: 0;
}
.loader:before {
	left: -3.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 3.5em;
}
@-webkit-keyframes load7 {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}
@keyframes load7 {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}
p.load_logo img{
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}
.load_wrap{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.loading-animation img{
	width: 100%;
	max-width: 300px;
}
/* ローディングアニメーション ここまで */

#page-top{
	position: fixed;
	right: 1%;
	margin: 10px auto;
	z-index: 999;
}
#page-top span.BacktoTOP{
	text-align: center;
	display: block;
	background: #BB5520;
	color: #FFF;
	padding: 7px;
	border: 1px solid #BB5520;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	letter-spacing: 1px;
	line-height: 1.2;
	font-weight: bold;
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(100px);
	}
}

h1.logo{
	line-height: 0;
}
h1.logo a{
	display: inline-block;
}
.gnav_icon{
	display: none;
}
header{
	position: fixed;
	width: 100%;
	background: #FFF;
	z-index: 9999;
	border-bottom: 1px solid #BB5520;
}
.gnav__menu__item {
	position: relative;
	transition: transform 0.2s ease; /* 0.2秒かけてアニメーションを行う */
}
.gnav__menu__item:hover {
	transform: translateY(-5px); /* マウスホバー時に上に5px移動 */
}
.gnav__menu li a{
	text-decoration: none;
	color: #BB5520;
}
.gnav__menu li a:hover{
	color: #F5AA2F;
}
ul.language-list{
	display: none;
}
ul.flex-display{
	display: flex;
	border: 1px solid #BB5520;
}
ul.language-list li.lang_active,
ul.language-list li.lang_active:hover{
	background: #BB5520;
	color: #FFF;
}
.hero{
	position: relative;
}
.ps_icon{
	position: absolute;
	top: 0;
}
.ps_icon img{
	width: 100%;
	max-width: 246px;
}
.apricot_icon{
	position: absolute;
	bottom: 0;
}
p.hero_copyright{
	position: absolute;
	right: 1%;
	bottom: 1%;
	font-size: 1.4rem;
	color: #FFF;
	text-shadow: 
		1px  1px 0px #000000,
		-1px  1px 0px #000000,
		1px -1px 0px #000000,
		-1px -1px 0px #000000,
		1px  0px 0px #000000,
		0px  1px 0px #000000,
		-1px  0px 0px #000000,
		0px -1px 0px #000000;
}
.main_content{
	background: url("../images/Pat_paper.png");
}
/* Swiper用css ここから */
.News_wrapper{
	overflow: hidden;
	position: relative;
	padding-bottom: 70px;
}
.buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center
}
.button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 1px solid #FFF;
	border-radius: 0;
	box-shadow: none;
	color: #FFF;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	padding: .8em 4.5em;
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: all .2s;
}
.button.is-large {
	font-size: 2rem
}
.button-primary {
	border: none;
	color: #FFF;
	font-size: 1.6rem;
	font-weight: 700;
	position: relative;
	z-index: 1;
	background: #BB5520;
}
.button-primary-inner {
	background: linear-gradient(150deg, #F5E4A6 30%, #F1CB76 60%);
	height: 100%;
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	transition: opacity .3s ease-out;
	width: 100%;
	z-index: -1;
}
.button-primary:hover:not(:disabled):not(.is-disabled) {
	opacity: 1;
	color: #000000;
}
.button-primary:hover:not(:disabled):not(.is-disabled) .button-primary-inner {
	opacity: 1;
}
.c-card-inner {
	display: block;
	text-decoration: none
}
.c-card-body {
	padding: 8px;
	font-size: 1.6rem;
}
.heading-image {
	text-align: center;
	padding: 20px 0;
}
.l-container {
	overflow: hidden;
	position: relative;
}
.info-card-inner {
	background: #FFF;
	border: 1px solid #7E9094;
	box-shadow: 0 0 20px 0 transparent;
	transition: border .3s ease-in, box-shadow .5s ease-out;
	margin-left: 10px;
}
.info-card-inner:hover {
	border-color: #FFE3B4;
	box-shadow: 0 0 20px 5px #FFCB73;
	opacity: 1
}
.info-card-date {
	color: #BB5520;
	display: block;
	margin-bottom: 4px
}
.info-card-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis
}
.home-info-slider.swiper-container {
	overflow: visible;
}
.home-info-slider .swiper-button-next, .home-info-slider .swiper-button-prev {
	display: none;
	height: 100%;
	margin-top: 0;
	top: 0;
	width: 100%;
}
.home-info-slider .swiper-button-next:after, .home-info-slider .swiper-button-prev:after {
	content: "";
	display: block;
	height: 82px;
	transition: transform .3s ease-in-out;
	width: 35px;
}
.home-info-slider .swiper-button-prev {
	justify-content: flex-end;
	right: 50%;
	margin-right: 50%;
	left: inherit;
}
.home-info-slider .swiper-button-prev:after {
	background: url("../images/news_arrow_prev.png") no-repeat;
	background-size: 35px 82px
}
.home-info-slider .swiper-button-next {
	justify-content: flex-start;
	left: 50%;
	margin-left: 50%;
}
.home-info-slider .swiper-button-next:after {
	background: url("../images/news_arrow_next.png") no-repeat;
	background-size: 35px 82px;
}
.more_button {
	margin-top: 40px
}
.title_txt{
	width: 100%;
	max-width: 1200px;
	font-size: 5rem;
	color: #BB5520;
	display: flex;
	justify-content: center;
	margin: 80px auto 50px auto;
	align-items: center;
	position: relative;
	text-align: center;
	letter-spacing: 3px;
}
.title_txt:before{
	content: '';
	display: block;
	width: 100%;
	max-width: 370px;
	height: 58px;
	background: url("../images/Img_Headline.png") no-repeat;
	background-size: contain;
	background-position: center;
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translate(0, -50%);
}
.title_txt:after{
	content: '';
	display: block;
	width: 100%;
	max-width: 370px;
	height: 58px;
	background: url("../images/Img_Headline.png") no-repeat;
	background-size: contain;
	background-position: center;
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translate(0, -50%) scale(-1, 1);
}
.title_txt p{
	line-height: 0.8;
}
.title_ja{
	font-size: 1.6rem;
}
.System_content{
	width: 100%;
	max-width: 1200px;
	margin: auto;
}
/* システム内見出し ここから */
.bgextend {
	animation-name: bgextendAnimeBase;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	position: relative;
	overflow: hidden; /*　はみ出た色要素を隠す　*/
	opacity: 0;
	padding: 15px 0;
}
@keyframes bgextendAnimeBase {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/*中の要素*/
.bgappear {
	animation-name: bgextendAnimeSecond;
	animation-duration: 1s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
	opacity: 0;
	background: #FFA61D;
	padding: 15px;
}
@keyframes bgextendAnimeSecond {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*==================================================
左から右に伸びて出現
===================================*/
.bgMove::before {
	animation-name: bgMoveanimation;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #FFF; /*伸びる背景色の設定*/
	top: 0;
}
@keyframes bgMoveanimation {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}
	50% {
	transform-origin: left;
		transform: scaleX(1);
	}
	50.001% {
		transform-origin: right;
	}
	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgtxtTrigger,
.bgTrigger {
	opacity: 0;
}
.system_column{
	margin: 90px auto;
}
.system_column h3.righttxt{
	font-size: 3rem;
	text-align: right;
	color: #FFF;
	font-weight: normal;
	margin-bottom: 60px;
}
.system_column h3.lefttxt{
	font-size: 3rem;
	text-align: left;
	color: #FFF;
	font-weight: normal;
	margin-bottom: 60px;
}
.system_column_image_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px;
}
.system_column_image img{
	width: 100%;
	max-width: 580px;
}
.system_column_txt{
	font-size: 1.8rem;
	margin: 30px auto;
	background: #FFF;
	padding: 20px;
}
h3.system_sp_title{
	display: none;
}
/* システム内見出し ここまで */

.about_content{
	width: 100%;
	max-width: 550px;
}
.about_content h4{
	font-size: 3rem;
	padding: 10px 30px;
	background: #E77D96;
	color: #FFF;
	font-weight: normal;
}
.vr_link {
    text-align: center;
    width: 100%;
    max-width: 970px;
    margin: 30px auto;
}
.vr_link a {
    display: block;
    position: relative;
}
.vr_link a img {
    transition: 0.2s;
    opacity: 1;
}
.vr_link a:hover img {
    opacity: 0.7;
}
.vr_link a:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    transition: 0.2s;
    pointer-events: none;
}
.attention{
	background: #FFF;
	padding: 30px;
	border: 3px solid #FFB000;
	margin-top: 70px;
	max-width: none;
}
.attention h4{
	text-align: center;
	color: #FFF;
	background: #FF013C;
	margin-bottom: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	font-size: 3rem;
}
.attention p{
	font-size: 1.8rem;
}
.Story_wrapper{
	position: relative;
	background: url("../images/BG_story.jpg") no-repeat;
	background-size: cover;
	background-position: center top;
	height: 100vh;
	padding: 100px 0;
	z-index: 0;
}
.Story_wrapper:after{
	content: '';
	position: absolute;
	right: 3%;
	bottom: 4%;
	background: url("../images/Img_Story.png") no-repeat;
	width: 358px;
	height: 357px;
	background-size: contain;
	z-index: -1;
}
.Story_wrapper h2 p{
	text-shadow: 1px 1px 0px #FFF,-1px 1px 0px #FFF, 1px -1px 0px #FFF, -1px -1px 0px #FFF, 1px 0px 0px #FFF, 0px 1px 0px #FFF, -1px 0px 0px #FFF, 0px -1px 0px #FFF
}
.story_content{
	width: 100%;
	max-width: 800px;
	margin: 100px auto;
	font-size: 2.5rem;
	line-height: 2;
}
.story_content p{
	color: #6D6452;
	text-align: center;
	text-shadow: 2px 2px 0px #FFF, -1px 2px 0px #FFF, 2px -1px 0px #FFF, -1px -1px 0px #FFF, 2px 0px 0px #FFF, 0px -2px 0px #FFF, -2px 0px 0px #FFF, 0px -2px 0px #FFF;
	margin: 30px auto;
	font-weight: bold;
}
.tab_sp{
	display: none;
}
p.copyright{
	text-align: center;
}
.footer_sns{
	display: flex;
	list-style: none;
	justify-content: center;
	padding: 0;
	gap: 10px;
}
.footer_sns li{
	position: relative;
}
.footer_sns li a{
	display: inline-block;
	padding: 5px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	color: #FFF;
}
.footer_nav{
	display: flex;
	list-style: none;
	justify-content: center;
	padding: 0;
	gap: 20px;
	margin: 30px auto;
}
.footer_nav li a{
	color: #BB5520;
}
.sns-icon-twitter {
	background: #000;
}
.sns-icon-facebook {
	background: #3B5998;
}
.sns-icon-instagram {
	background: #D93177;
}
.fa-instagram:before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.sns-icon-youtube {
	background: #CD201F;
}
ul.footer_sns li a span.fa-x-twitter:before,
ul.footer_sns li a span.fa-facebook:before,
ul.footer_sns li a span.fa-instagram:before,
ul.footer_sns li a span.fa-youtube-play:before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
}
/* キャラ紹介css ここから */
.character_read{
	font-size: 1.8rem;
	text-align: center;
	margin-bottom: 60px;
	font-weight: bold;
}
/* スライダー */
.slider .slick-prev {
	left: 1px;
	z-index: 99;
}
.slider .slick-next {
	right: 1px;
}
.slick-prev:before, .slick-next:before{
	color: black!important;
}
.slick-slider{
	width: 100%;
	max-width: 1300px;
	margin: auto;
}
.slide-item {
	border-style: solid;
	border-width: 2px;
	border-color: white;
	border-radius: 45px;
	position: relative;
	font-size: .5rem;
	margin: .4rem 1rem;
	overflow: auto;
}
.slide-item .icon-new {
	position: absolute;
	top: -.4rem;
	left: -1rem;
}
.slide-item .icon-new img {
	width: 50px;
	height: 50px;
}
.slide-item a {
	text-decoration: none;
	color: #333;
}
.slide-item h2 {
	font-size: 4rem;
	margin-bottom: .5rem;
	line-height: 1.2;
	margin-bottom: 60px;
	letter-spacing: 2px;
}
.slide-item span.chara_voice{
	font-size: 2.5rem;
	color: initial;
}
.slide-item h3{
	font-size: 2rem;
	margin-bottom: 10px;
}
.slide-item p{
	font-size: 1.8rem;
}
.slide-item p.personality{
	margin: 30px 0;
}
.slide-item .flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	overflow: hidden;
	background: #FFF;
	z-index: -2;
	min-height: 533px;
}
.slide-item .flex figure {
	width: 100%;
	margin-right: .625rem;
}
.koume_wrap{
	background: url("../images/BG_Chr_Koume.jpg");
	background-size: contain;
	clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
}
.sakura_wrap{
	background: url("../images/BG_Chr_Sakura.jpg");
	background-size: contain;
	clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
}
.itsuha_wrap{
	background: url("../images/BG_Chr_Itsuha.jpg");
	background-size: contain;
	clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
}
.slide-item .flex img {
	width: 100%;
	max-width: 300px;
	height: auto;
	border-radius: 6px 0 0 6px;
	margin-left: auto;
	margin-right: 50px;
}
.slide-item .flex .textarea {
	width: 45%;
	padding: 0 30px;
	color: #515151;
}
/* サムネイル用のスタイル */
.slider-thumbnails {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}
.thumbnail-item {
	margin: 0 10px;
	cursor: pointer;
	background: #FFF;
}
.thumbnail-item img {
	max-width: 70px;
	height: auto;
	border: 2px solid #CCC;
}
.thumbnail-item.active img {
	border-color: #E79C20;
}
.face_image_wrap{
	width: 50%;
	display: flex;
	position: relative;
}
div.face_image_wrap > figure.face_image img{
	position: absolute;
	top: 0;
	width: 100%;
	max-width: 460px;
	z-index: -1;
}
figure.koume:after{
	content: '';
	display: block;
	width: 949px;
	height: 2718px;
	transform: skewY(73deg);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
figure.sakura:after{
	content: '';
	display: block;
	width: 949px;
	height: 2718px;
	transform: skewY(73deg);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
figure.itsuha:after{
	content: '';
	display: block;
	width: 949px;
	height: 2718px;
	transform: skewY(73deg);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
h2.name_koume{
	color: #E9526D;
}
h2.name_sakura{
	color: #F7A55C;
}
h2.name_itsuha{
	color: #4EA9E1;
}
div.slick-slider > button.slick-next:before,
div.slick-slider > button.slick-prev:before{
	content: none;
}
.slider button.slick-prev{
	background: url("../images/slick_prev.png") no-repeat;
	background-size: contain;
	left: 3%;
	width: 35px;
	height: 35px;
}
.slider button.slick-next{
	background: url("../images/slick_next.png") no-repeat;
	background-size: contain;
	background-position: right;
	right: 3%;
	width: 35px;
	height: 35px;
}
.spec{
	margin: 80px auto 0 auto;
}
.spec_content{
	background: #FFF;
	font-size: 1.8rem;
	padding: 30px 10px 110px 10px;
}
dl.spec_list{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 800px;
	margin: auto;
}
dl.spec_list dt{
	width: 30%;
	padding: 10px;
	font-weight: bold;
}
dl.spec_list dd{
	width: 70%;
	padding: 10px;
}
.spec_attention_area{
	width: 100%;
	max-width: 800px;
	margin: 30px auto;
}
.spec_attention_read{
	font-size: 1.5rem;
	margin-bottom: 20px;
}
footer{
	font-size: 1.3rem;
	padding: 30px 0;
	background: #F7F7F7;
	border-top: 1px solid #B5B5B5;
}
/* ニュース一覧ページ用css ここから */
.news_list_contaianer{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1020px;
	margin: 80px auto 0 auto;
	justify-content: flex-start;
	gap: 30px;
}
.news_list_contaianer dl{
	max-width: 320px;
}
.news_list_contaianer dl a.info-card-inner{
	margin: 0;
}
.pagewrap{
	display: flex;
	max-width: 550px;
	width: 100%;
	justify-content: space-between;
	margin: 50px auto 0 auto;
	align-items: center;
	padding: 0 30px;
	column-gap: 10px;
}
.pagewrap .first-page button,
.pagewrap .end-page button{
	padding: 10px;
	background: #FFF;
	border: 1px solid #000;
	color: #000;
	cursor: pointer;
}
.pagewrap .prev-page button,
.pagewrap .next-page button{
	padding: 10px;
	background: #FFF;
	border: 1px solid #000;
	color: #000;
	cursor: pointer;
}
ul.pageinner{
	list-style: none;
	display: flex;
	padding: 0;
	width: 100%;
	max-width: 280px;
	justify-content: center;
	align-items: center;
	margin: 0 50px;
	font-size: 2.5rem;
	gap: 10px;
}
ul.pageinner li{
	border: 1px solid #000;
	background: #FFF;
}
ul.pageinner li a{
	color: #000;
	padding: 0 5px;
}
ul.pageinner li.current a{
	color: #F5AA2F;
}
/* ニュース一覧ページ用css ここまで */

/* ニュース記事用css ここから */
.News_wrap{
	padding: 50px 0;
}
.News_content{
	background: #FFF;
	border: 3px solid #BB5520;
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 60px;
}
.News_content p time{
	font-size: 1.5rem;
}
h2.news_title{
	font-size: 2.5rem;
	margin: 30px auto 15px auto;
}
.news_block{
	margin: 50px auto;
	font-size: 1.8rem;
}
.news_block h3{
	margin-bottom: 20px;
}
dl.news_select{
	margin: 0 auto 30px 50px;
}
dl.news_select dt{
	font-weight: bold;
}
dl.news_select dd{
	margin-bottom: 20px;
}
.news_block p{
	margin: 30px auto;
}
.news_flex_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 50px auto;
	gap: 40px;
}
.news_flex_content{
	width: 100%;
	max-width: 450px;
}
.news_flex_content p{
	margin: 0;
}
.news_block p.image_caption{
	font-size: 1.5rem;
	margin-top: 10px;
}
h3.news_subtitle{
	background: #F5F5F5;
	padding: 15px;
	color: #813A15;
	margin-bottom: 20px;
}
.news_sub_content{
	margin-bottom: 60px;
}
p.news_top{
	font-size: 1.8rem;
	text-align: center;
	border: 2px solid #BB5520;
	width: 100%;
	max-width: 175px;
	margin: 60px auto;
	background: #FFF;
}
p.news_top a{
	text-decoration: none;
	color: #BB5520;
	display: block;
	padding: 10px 0;
}
.news_table{
	width: 100%;
	max-width: 1000px;
	border: 1px solid #FFF;
	border-collapse: separate;
	border-spacing: 0 20px;
}
.news_table th{
	width: 20%;
	padding: 15px 20px;
	text-align: left;
	background: #F4F4F4;
}
.news_table td{
	width: 80%;
	padding: 15px 20px;
}
/* ニュース記事用css ここまで */

/* プレスリリース用css ここから */
.Press_Release__content{
	background: #FFF;
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 60px;
}
.Press_Release_head{
	font-size: 1.8rem;
}
p.date{
	text-align: right;
	margin: 40px 0;
}
h2.Press_Release_title{
	font-size: 2.5rem;
	margin: 30px auto;
	text-align: center;
}
.Press_Release_spec_title{
	margin-bottom: 20px;
}
.Press_Release_spec{
	border: 1px solid #813A15;
	width: 100%;
	max-width: 1080px;
	border-collapse: collapse;
}
.Press_Release_spec th{
	width: 30%;
	border: 1px solid #813A15;
	padding: 0.8em;
}
.Press_Release_spec td{
	border: 1px solid #813A15;
	padding: 0.8em;
	width: 100%;
}
/* プレスリリース用css ここまで */

/* FAQ ここから */
.faq_list {
	width: 100%;
	max-width: 1000px;
	margin: 60px auto;
}
.faq_wrap{
	margin-bottom: 40px;
}
.faq_tag{
	background: #FFA61D;
	display: inline-block;
	color: #FFF;
	padding: 4px 7px;
	margin: 0;
	font-size: 1.5rem;;
}
.faq_container{
	font-size: 1.8rem;
	width: 100%;
	max-width: 1000px;
	margin: auto;
	padding: 0 20px;
}
.question {
	position: relative;
	border-bottom: 1px solid #FFF;
	background-color: #E96D28DB;
	color: #FFF;
	line-height: 1.8;
	cursor: pointer;
	padding: 20px 60px 20px 20px;
	font-size: 1.8rem;
	display: flex;
}
.question:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 21px;
	width: 24px;
	height: 2px;
	background: #fff;
	transform: translateY(-50%);
}
.question:after {
	content: "";
	position: absolute;
	top: 50%;
	/* 8px+12px-1px(幅2pxの半分) */
	right: 32px;
	width: 2px;
	height: 24px;
	background: #FFF;
	transform: translateY(-50%);
	transition: .3s;
}
.question.open:after {
	top: 25%;
	opacity: 0;
	transform: rotate(90deg);
}
span.question_icon{
	padding-right: 2%;
}
.answer {
	display: none;
	padding: 20px 60px 20px 20px;
	background: #FFF;
	font-size: 1.8rem;
	color: #BB5520;
}
.answer p{
	display: flex;
}
span.answer_icon{
	padding-right: 2%;
}
/* FAQ ここまで */

/* 秘密ページ ここから */
.fade_display{
	display: none;
}
.secret_wrap{
	padding: 50px 0;
	background: url(../images/secret/BG_SecretPage.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
.secret_inner{
	font-size: 1.8rem;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto 70px auto;
}
.secret_inner h1{
	text-align: center;
}
.sp_title_img{
	display: none;
}
.pc_title_img{
	width: 100%;
	max-width: 900px;
	margin: auto;
}
p.secret_toptxt{
	text-align: center;
	margin: 30px auto 70px auto;
	color: #6D6452;
	font-weight: bold;
	text-shadow:
		2px 2px 0px #FFF,
		-1px 2px 0px #FFF,
		2px -1px 0px #FFF,
		-1px -1px 0px #FFF,
		2px 0px 0px #FFF,
		0px -2px 0px #FFF,
		-2px 0px 0px #FFF,
		0px -2px 0px #FFF;
	line-height: 1.8;
}
.secret_title_bg:before{
	content: '';
	background: url(../images/secret/Img_TitleBG_SecretPage_L.png) no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 0;
	width: 71px;
	height: 71px;
	z-index: -1;
}
.secret_title_bg:after{
	content: '';
	background: url(../images/secret/Img_TitleBG_SecretPage_R.png) no-repeat;
	background-size: contain;
	position: absolute;
	right: 0;
	top: 0;
	width: 71px;
	height: 71px;
	z-index: -1;
}
.secret_title_bg{
	background: url(../images/secret/Img_TitleBG_SecretPage_Center.png) repeat;
	background-size: contain;
	padding: 15px;
	font-weight: normal;
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: auto;
}
.secret_inner h2{
	text-align: center;
	margin-bottom: 60px;
	font-weight: bold;
	z-index: 2;
}
.poster_content{
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
}
.poster_content h3{
	text-align: center;
	text-shadow:
		2px 2px 0px #FFF,
		-1px 2px 0px #FFF,
		2px -1px 0px #FFF,
		-1px -1px 0px #FFF,
		2px 0px 0px #FFF,
		0px -2px 0px #FFF,
		-2px 0px 0px #FFF,
		0px -2px 0px #FFF;
	font-size: 2.5rem;
	margin-bottom: 60px;
}
.poster_content_inner{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 30px auto 170px auto;
}
.poster{
	width: 100%;
	max-width: 450px;
	display: flex;
}
.poster p{
	width: 100%;
	max-width: 300px;
	height: auto;
}
.poster ul{
	padding: 0;
	text-align: center;
	margin: auto;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px 0;
}
.poster ul li{
	border: 1px solid #BB5520;
	background: #FFF;
	position: relative;
	transition: transform 0.2s ease;
	width: 100%;
	max-width: 180px;
}
.poster ul li a{
	display: block;
	padding: 10px 0;
	color: #BB5520;
}
.poster ul li a:hover{
	color: #F5AA2F;
}
section.secret_inner > div.attention{
	max-width: 1200px;
	margin: auto;
	padding: 50px;
	background: url(../images/Pat_paper.png);
}
section.secret_inner > div.attention h2{
	margin-bottom: 50px;
}
section.secret_inner > div.attention p.about_koi2_txt,
section.secret_inner > div.attention p.secret_top_link{
	color: #6D6452;
}
section.secret_inner > div.attention > .trailer_inner{
	margin: 50px auto;
	border: none;
}
.about_koi2_txt{
	max-width: 800px;
	margin: auto;
}
.secret_top_link{
	text-align: center;
}
p.secret_koi2image{
	margin-bottom: 30px;
}
p.secret_koi2image img{
	width: 100%;
	max-width: 1000px;
	margin: auto;
}
.attention p.ps_link{
	color: #FFF;
	background: #E29000;
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 2px;
	margin: 30px auto 120px auto;
	max-width: 300px;
}
.ps_link a{
	color: #FFF;
	display: block;
	padding: 15px 20px;
}
/* 秘密ページ ここまで */

/* タブレットcss */
@media screen and (min-width: 768px) and (max-width: 1280px) {
	.sp_header{
		padding: 5px 10px;
	}
	/*menu*/
	.menu {
		height: 20px;
		position: absolute;
		top: 50%;
		right: 10%;
		transform: translate(0%, -50%);
		width: 30px;
		z-index: 99;
	}
	.menu__line {
		background: #BB5520;
		display: block;
		height: 2px;
		position: absolute;
		transition: transform 0.3s;
		width: 100%;
	}
	.menu__line--middle {
		bottom: 10px;
	}
	.menu__line--bottom {
		bottom: 0;
	}
	.menu__line--top.active {
		top: 8px;
		transform: rotate(45deg);
		background: #BB5520;
	}
	.menu__line--middle.active{
		display: none;
	}
	.menu__line--bottom.active {
		bottom: 10px;
		transform: rotate(135deg);
		background: #BB5520;
	}
	/*gnav*/
	.gnav {
		background: #FBFAF0;
		display: none;
		height: 100%;
		position: fixed;
		width: 100%;
		z-index: 98;
		overflow: scroll;
		border-top: 1px solid;
	}
	.toggle_menu{
		position: relative;
	}
	.lang_selecter{
		position: absolute;
		top: 50%;
		right: 3%;
		transform: translate(0%, -50%);
	}
	.lang_selecter:after{
		position: absolute;
		content: '▼';
		font-size: 1.3rem;
		right: -20%;
		top: 50%;
		transform: translate(0, -40%);
	}
	.lang_selecter img{
		width: 100%;
		max-width: 40px;
	}
	.hero{
		background: url("../images/Herobanner_T.jpg") no-repeat;
		background-size: cover;
		max-height: 930px;
		height: 100vh;
	}
	.hero_pc{
		display: none;
	}
	.hero_sp{
		width: 100%;
	}
	.twitter_box_pc{
		display: none;
	}
	.koi2_logo{
		width: 100%;
		max-width: 500px;
		position: absolute;
		bottom: -8%;
		left: 50%;
		transform: translate(-50%, -100%);
	}
	.gnav h2{
		position: absolute;
		font-size: 5rem;
	}
	.gnav__wrap{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		max-width: 320px;
		height: auto;
		position: absolute;
		justify-content: flex-start;
		margin-left: 40px;
		margin-top: 70px;
	}
	.gnav__menu{
		padding: 0;
		margin-bottom: 60px;
	}
	.sns-icon-twitter{
		background: #000;
	}
	.sns-icon-facebook{
		background: #3B5998;
	}
	.sns-icon-instagram {
		background: #D93177;
	}
	.sns-icon-youtube{
		background: #CD201F;
	}
	.gnav_icon{
		display: flex;
		list-style: none;
		padding: 0;
		font-size: 3rem;
		gap: 20px;
		margin-top: 50px;
	}
	.gnav_icon li{
		position: relative;
	}
	.gnav_icon li a{
		display: inline-block;
		padding: 5px;
		border-radius: 50%;
		width: 70px;
		height: 70px;
		color: #FFF;
	}
	.gnav_icon li a span.fa-2x{
		font-size: 4rem;
		position: absolute;
		top: 43%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	ul.flex-display {
		padding: 0;
		position: absolute;
		right: 1%;
		bottom: 0;
		transform: translate(0%, 100%);
		flex-direction: column;
		font-size: 1.8rem;
		background: #FFF;
		width: 100%;
		max-width: 200px;
		list-style: none;
		z-index: 100;
	}
	ul.language-list li {
		cursor: pointer;
		color: #BB5520;
		padding: 10px;
	}
	ul.language-list li:hover{
		background: #F4EE84;
	}
	.gnav__menu{
		list-style: none;
	}
	.gnav__menu__item a{
		font-size: 6rem;
		font-weight: bold;
	}
	h1.logo img{
		width: 100%;
		max-width: 170px;
	}
	.ps_icon img{
		max-width: 170px;
	}
	.apricot_icon img{
		max-width: 150px;
	}
	.twitter_box_sp_wrapper{
		padding: 60px 0;
	}
	.twitter_box_sp{
		width: 100%;
		max-width: 600px;
		height: 370px;
		padding: 10px;
		background: rgba(29, 161, 242, .6);
		margin: auto;
	}
	.twitter_box_sp p{
		padding: 10px 0;
		width: 100%;
		max-width: 300px;
		margin: auto;
		font-size: 1.6rem;
		font-weight: bold;
		color: #FFF;
		text-align: center;
		letter-spacing: 2px;
	}
	.Story_wrapper{
		padding: 70px 0;
	}
	.Story_wrapper:after{
		width: 260px;
		height: 260px;
	}
	.story_content{
		font-size: 3rem;
		margin: 70px auto;
		max-width: 850px;
	}
	.story_content p{
		margin: 50px auto;
	}
	.tab_sp{
		display: inline-block;
	}
	.image_flex{
		justify-content: center;
		gap: 50px;
	}
	.about_content{
		width: 100%;
		max-width: 750px;
		margin: auto;
	}
	.system_column_image img{
		max-width: 900px;
	}
	.image_flex p{
		max-width: 750px;
	}
	.slide-item{
		min-height: 1100px;
	}
	.slide-item .flex{
		min-height: 1100px;
		gap: 60px;
		align-items: initial;
	}
	.slide-item .flex figure{
		width: 100%;
		background: none;
	}
	.slide-item .flex .textarea{
		width: 100%;
	}
	figure.face_image{
		display: block;
	}
	.slide-item .flex img{
		max-width: 350px;
	}
	.face_image_wrap{
		display: flex;
		width: 100%;
		align-items: baseline;
	}
	div.face_image_wrap > figure.face_image img{
		bottom: 0;
		max-width: 460px;
		top: auto;
	}
	.koume_wrap{
		background: url("../images/BG_Chr_Koume.jpg");
		background-size: contain;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
	.sakura_wrap{
		background: url("../images/BG_Chr_Sakura.jpg");
		background-size: contain;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
	.itsuha_wrap{
		background: url("../images/BG_Chr_Itsuha.jpg");
		background-size: contain;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
	.thumbnail-item img{
		max-width: 120px;
	}
	.title_txt:before,
	.title_txt:after{
		max-width: 180px;
		height: 38px;
	}
	dl.spec_list{
		max-width: 630px;
	}
	dl.spec_list dt{
		width: 40%;
	}
	dl.spec_list dd{
		width: 60%;
	}
	li.gnav__menu__item{
		padding: 20px 0;
	}
	.gnav__menu li a{
		letter-spacing: 6px;
	}
	.system_column h3.righttxt,
	.system_column h3.lefttxt{
		font-size: 3rem;
	}
	.system_column_image_wrap{
		justify-content: center;
	}
	div.spec_content > h2.title_txt{
		margin-top: 40px;;
	}
	/* ニュース一覧ページ用css ここから */
	.news_list_contaianer{
		justify-content: center;
	}
	/* ニュース一覧ページ用css ここまで */

	/* ニュース記事用css ここから */
	.News_content{
		padding: 30px;
	}
	h3.system_sp_title{
		display: block;
		font-size: 3rem;
		font-weight: normal;
		background: #FFA61D;
		color: #FFF;
		padding: 10px;
		margin-bottom: 40px;
	}
	h3.righttxt,
	h3.lefttxt{
		display: none;
	}
	.news_table th,
	.news_table td{
		display: block;
		width: 100%;
	}
	/* ニュース記事用css ここまで */

	/* 秘密ページ用css ここから */
	.pc_title_img{
		max-width: 650px;
	}
	.secret_title_bg:before,
	.secret_title_bg:after{
		width: 70.5px;
		height: 70.5px;
	}
	.poster_content_inner{
		gap: 90px;
	}
	.poster{
		max-width: 680px;
	}
	.poster ul{
		display: flex;
		max-width: 680px;
	}
	.poster ul li{
		max-width: 200px;
	}
	.poster ul li a{
		padding: 20px 30px;
	}
	/* 秘密ページ用css ここまで */
}

/* スマホcss */
@media screen and (max-width: 767px) {
	.sp_header{
		padding: 5px 10px;
	}
	/*menu*/
	.menu {
		height: 20px;
		position: absolute;
		top: 50%;
		right: 20%;
		transform: translate(0%, -50%);
		width: 30px;
		z-index: 99;
	}
	.menu__line {
		background: #BB5520;
		display: block;
		height: 2px;
		position: absolute;
		transition: transform 0.3s;
		width: 100%;
	}
	.menu__line--middle {
		bottom: 10px;
	}
	.menu__line--bottom {
		bottom: 0;
	}
	.menu__line--top.active {
		top: 8px;
		transform: rotate(45deg);
		background: #BB5520;
	}
	.menu__line--middle.active{
		display: none;
	}
	.menu__line--bottom.active {
		bottom: 10px;
		transform: rotate(135deg);
		background: #BB5520;
	}
	/*gnav*/
	.gnav {
		background: #FBFAF0;
		display: none;
		height: 100%;
		position: fixed;
		width: 100%;
		z-index: 98;
		overflow: scroll;
		border-top: 1px solid;
	}
	.toggle_menu{
		position: relative;
	}
	.lang_selecter{
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0%, -50%);
		margin-right: 20px;
	}
	.lang_selecter:after{
		position: absolute;
		content: '▼';
		right: -20%;
		top: 50%;
		transform: translate(0, -40%);
	}
	.lang_selecter img{
		width: 100%;
		max-width: 40px;
	}
	.hero{
		background: url("../images/Herobanner_T.jpg") no-repeat;
		background-size: cover;
		max-height: 930px;
		height: 100vh;
	}
	.hero_pc{
		display: none;
	}
	.hero_sp{
		width: 100%;
	}
	.twitter_box_pc{
		display: none;
	}
	.koi2_logo{
		width: 100%;
		max-width: 500px;
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translate(-50%, -100%);
	}
	.gnav_icon{
		display: flex;
		list-style: none;
		padding: 0;
		font-size: 2rem;
		gap: 20px;
	}
	.gnav_icon li{
		position: relative;
	}
	.gnav_icon li a{
		display: inline-block;
		padding: 5px;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		color: #FFF;
	}
	.gnav_icon li a span.fa-2x{
		font-size: 3rem;
		position: absolute;
		top: 43%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.sns-icon-twitter{
		background: #000;
	}
	.sns-icon-facebook{
		background: #3B5998;
	}
	.sns-icon-instagram {
		background: #D93177;
	}
	.sns-icon-youtube{
		background: #CD201F;
	}
	ul.flex-display {
		padding: 0;
		position: absolute;
		right: 0;
		bottom: 0;
		transform: translate(0%, 100%);
		flex-direction: column;
		font-size: 1.8rem;
		background: #FFF;
		width: 100%;
		max-width: 200px;
		list-style: none;
		z-index: 100;
	}
	ul.language-list li {
		cursor: pointer;
		color: #BB5520;
		padding: 10px;
	}
	ul.language-list li:hover{
		background: #F4EE84;
	}
	h1.logo img{
		width: 100%;
		max-width: 150px;
	}
	p.hero_copyright{
		font-size: 1rem;
	}
	.gnav__wrap{
		margin-left: 30px;
		margin-top: 70px;
		padding-bottom: 50px;
	}
	.gnav__menu{
		padding: 0;
		list-style: none;
		margin-bottom: 60px;
	}
	.gnav__menu__item {
		margin-bottom: 2rem;
	}
	.gnav__menu__item a {
		color: #F4F6F7;
		font-size: 4rem;
		font-weight: bold;
		letter-spacing: 0.1rem;
		text-decoration: none;
		transition: 0.2s;
	}
	.ps_icon img{
		max-width: 140px;
	}
	main > .hero{
		max-height: 640px;
		background-position: center;
	}
	span.koi2_logo{
		max-width: 300px;
		bottom: -10%;
	}
	span.apricot_icon{
		max-width: 80px;
	}
	.title_txt{
		font-size: 2.4rem;
	}
	.title_txt:before{
		background-size: cover;
		left: 3%;
		max-width: 90px;
		height: 13px;
	}
	.title_txt:after{
		background-size: cover;
		right: 3%;
		max-width: 90px;
		height: 13px;
	}
	.title_txt p{
		line-height: 1;
	}
	.twitter_box_sp_wrapper{
		padding: 60px 0;
	}
	.twitter_box_sp{
		width: 100%;
		max-width: 600px;
		height: 370px;
		padding: 10px;
		background: rgba(29, 161, 242, .6);
		margin: auto;
	}
	.twitter_box_sp p{
		padding: 10px 0;
		width: 100%;
		max-width: 300px;
		margin: auto;
		font-size: 1.6rem;
		font-weight: bold;
		color: #FFF;
		text-align: center;
		letter-spacing: 2px;
	}
	.Story_wrapper{
		padding: 60px 0;
		height: auto;
	}
	.Story_wrapper:after{
		width: 120px;
		height: 120px;
	}
	.Story_wrapper h2.title_txt{
		margin: 0;
	}
	.story_content{
		margin: 0 auto;
		font-size: 1.8rem;
		padding: 35px;
	}
	.tab_sp{
		display: none;
	}
	.story_content p{
		text-align: center;
	}
	.slide-item .flex figure{
		width: 100%;
		margin: 0;
	}
	.slide-item .flex .textarea{
		width: 100%;
	}
	figure.face_image{
		display: block;
	}
	.slide-item .flex img{
		margin-left: auto;
		width: 100%;
	}
	.face_image_wrap{
		display: flex;
		width: 100%;
		align-items: baseline;
		justify-content: center;
	}
	div.face_image_wrap > figure.face_image img{
		max-width: 260px;
		top: auto;
		bottom: 0;
	}
	.koume_wrap{
		background: url("../images/BG_Chr_Koume.jpg");
		background-size: contain;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
	.sakura_wrap{
		background: url("../images/BG_Chr_Sakura.jpg");
		background-size: contain;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
	.itsuha_wrap{
		background: url("../images/BG_Chr_Itsuha.jpg");
		background-size: contain;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
	figure.koume,
	figure.sakura,
	figure.itsuha{
		background: none;
	}
	figure.koume:after,
	figure.sakura:after,
	figure.itsuha:after{
		content: none;
	}
	.flex{
		gap: 30px;
	}
	.slide-item .flex{
		min-height: 760px;
		display: block;
	}
	.slide-item h2{
		font-size: 2.2rem;
		line-height: 1.6;
		margin: 30px auto;
	}
	.slide-item span.chara_voice{
		font-size: 1.7rem;
	}
	.slide-item{
		min-height: 760px;
	}
	dl.spec_list{
		text-align: center;
	}
	dl.spec_list dt{
		width: 100%;
		background: #F3F3F3;
	}
	dl.spec_list dd{
		width: 100%;
		text-align: left;
	}
	.gnav__menu li a{
		letter-spacing: 6px;
	}
	.system_column h3.righttxt,
	.system_column h3.lefttxt{
		display: none;
	}
	h3.system_sp_title{
		display: block;
		font-size: 2rem;
		font-weight: normal;
		background: #FFA61D;
		color: #FFF;
		padding: 10px;
		margin-bottom: 40px;
	}
	div.spec_content > h2.title_txt{
		margin-top: 10px;
	}
	/* ニュース一覧ページ用css ここから */
	.news_list_contaianer{
		justify-content: center;
	}
	/* ニュース一覧ページ用css ここまで */

	/* ニュース記事用css ここから */
	.News_wrap{
		padding: 50px 0;
	}
	.News_content{
		padding: 30px;
	}
	h2.news_title{
		font-size: 2rem;
	}
	h3.news_subtitle{
		font-size: 1.8rem;
	}
	.news_table th,
	.news_table td{
		display: block;
		width: 100%;
	}
	/* ニュース記事用css ここまで */

	/* プレスリリース用css ここから */
	.Press_Release__content{
		padding: 60px 10px;
	}
	h2.Press_Release_title{
		text-align: left;
		font-size: 2rem;
	}
	.Press_Release_spec{
		word-break: break-all;
	}
	.Press_Release_spec th,
	.Press_Release_spec td{
		display: block;
		width: 100%;
	}
	/* プレスリリース用css ここまで */

	span.question_icon,
	span.answer_icon{
		padding-right: 5%;
	}
	/* 秘密ページ ここから */
	.secret_wrap{
		background-position: center;
	}
	.secret_inner{
		padding: 0 10px;
	}
	.secret_inner h2{
		max-width: 360px;
		min-width: 300px;
		font-size: 1.8rem;
		font-weight: bold;
	}
	.secret_title_bg:before,
	.secret_title_bg:after{
		width: 57px;
		height: 57px;
	}
	.pc_title_img{
		display: none;
	}
	.sp_title_img{
		display: block;
	}
	p.secret_toptxt br{
		display: none;
	}
	.poster_content_inner{
		justify-content: space-around;
		gap: 70px;
	}
	.poster ul{
		max-width: 185px;
	}
	.poster ul li{
		max-width: 150px;
	}
	section.secret_inner > div.attention{
		padding: 50px 20px;
	}
	section.secret_inner > div.attention h2{
		font-size: 2rem;
	}
	.about_koi2_txt{
		text-align: left;
	}
	/* 秘密ページ ここまで */
}
/* キャラ紹介css ここまで */

@media screen and (min-width:960px) {
	.home-info-slider {
		width: calc(100% - 35px);
		max-width: 1010px
	}
	.home-info-slider .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next) {
		opacity: .4
	}
	.home-info-slider .swiper-slide.swiper-slide-next+.swiper-slide {
		opacity: 1
	}
	.home-info-slider .swiper-button-next, .home-info-slider .swiper-button-prev {
		display: flex
	}
}
/* Swiper用css ここまで */
.content-space{
	padding: 0 20px;
}
.official_trailer{
	margin: 0 auto 150px auto;
	padding-top: 80px;
}
.trailer_inner{
	width: 100%;
	max-width: 800px;
	margin: auto;
	border: 2px solid #EFA404;
	aspect-ratio: 16 / 9;
	line-height: 0;
}
.trailer_inner iframe{
	width: 100%;
	height: 100%;
}
@media screen and (min-width: 1281px) {
	ul{
		list-style: none;
	}
	a.menu{
		display: none;
	}
	h1.logo img{
		width: 100%;
		max-width: 170px;
	}
	.toggle_menu{
		display: flex;
		align-items: center;
		padding: 5px 20px;
	}
	nav.gnav{
		display: block;
		margin: 0 80px 0 auto;
	}
	ul.gnav__menu{
		padding: 0;
		display: flex;
		gap: 50px;
		font-size: 2rem;
		font-weight: bold;
	}
	.lang_selecter{
		cursor: pointer;
		display: block;
		margin-right: 20px;
		position: relative;
	}
	.lang_selecter:after{
		position: absolute;
		content: '▼';
		font-size: 1.3rem;
		right: -20%;
		top: 50%;
		transform: translate(0, -50%);
	}
	.lang_selecter img{
		width: 100%;
		max-width: 40px;
	}
	.toggle_menu{
		display: flex;
		align-items: center;
		position: relative;
	}
	ul.flex-display{
		padding: 0;
		position: absolute;
		right: 1%;
		bottom: 0;
		transform: translate(0%, 100%);
		flex-direction: column;
		font-size: 1.8rem;
		background: #FFF;
		width: 100%;
		max-width: 200px;
	}
	ul.language-list li{
		cursor: pointer;
		color: #BB5520;
		padding: 10px;
	}
	ul.language-list li:hover{
		background: #F4EE84;
	}
	.koi2_logo{
		position: absolute;
		top: 15%;
		right: 5%;
	}
	.koi2_logo img{
		width: 100%;
		max-width: 650px;
	}
	.twitter_box_pc{
		width: 100%;
		max-width: 340px;
		height: 315px;
		padding: 0 1px 20px 1px;
		background: rgba(29, 161, 242, .6);
		position: absolute;
		bottom: 7%;
		right: 4%;
	}
	.twitter_box_pc p{
		padding: 10px 0;
		width: 100%;
		max-width: 300px;
		margin: auto;
		font-size: 1.6rem;
		font-weight: bold;
		color: #FFF;
		letter-spacing: 2px;
	}
	.twitter-timeline{
		margin: auto;
	}
	.twitter_box_sp{
		display: none;
	}
	.hero{
		background: url("../images/Herobanner.jpg") no-repeat;
		background-size: cover;
		max-height: 930px;
		height: 100vh;
	}
	.hero_sp{
		display: none;
	}
}

/* ノートPC用css ここから */
@media screen and (min-width: 591px) and (max-width: 1280px) {
	.Story_wrapper{
		height: auto;
	}
}
/* ノートPC用css ここまで */

/* iPhone5/SE用css ここから */
@media screen and (max-width: 320px){
	h1.logo img{
		max-width: 90px;
	}
	.apricot_icon{
		bottom: 5%;
	}
	ul.flex-display{
		max-width: 150px;
	}
	.title_txt:before,
	.title_txt:after{
		background-size: contain;
		max-width: 60px;
	}
	.official_trailer{
		margin: 0 auto 75px auto;
		padding-top: 15px;
	}
	section.Story_wrapper > div.story_content p br{
		display: none;
	}
	.story_content{
		padding: 30px 15px;
	}
	div.face_image_wrap > figure.face_image img{
		max-width: 200px;
	}
	ul.footer_nav{
		flex-wrap: wrap;
		text-align: center;
	}
	ul.footer_nav li{
		width: 100%;
	}
}
/* iPhone5/SE用css ここまで */