@charset "utf-8";

#pancake99{
	font-size: 16px;
	background-image: url("../pancake99/images/pancake99_bg_pattern.png");
	background-size: 140px 86px;
	background-position: top center;
}
/* スマホ用ページ上部へ戻るボタン */
#pancake99 #pageTop{
	z-index: 99;
}
/* スマホ用フッター前マージン除去 */
#pancake99 ul.spFooter{
	margin-top: 0;
}

.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* メニュー */
#menu{
	width: 100%;
	position: fixed;
	z-index: 4;
	background-color: #ffeea7;
	/*
	opacity: 1;
	*/
	opacity: 0;
	transition: opacity .5s ease;
}
#menu.active{
	opacity: 1;
}
#menu ul{
	max-width: 1000px;
	margin: 0 auto;
	height: 60px;
	display: flex;
	gap: 1em;
	justify-content: center;
	align-items: center;
}
#menu li{
	width: 33%;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: #8c6239;
	display: flex;
	justify-content: center;
}
/*
#menu li:nth-of-type(2n){
		background-color: antiquewhite;
}
*/
#menu li::before{
	content: "";
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	filter: invert(37%) sepia(70%) saturate(335%) hue-rotate(349deg) brightness(94%) contrast(92%);
	margin-right: .5em;
}
#menu li.menu_pancake::before{
	background-image: url("../pancake99/images/icon_pancake.svg");
}
#menu li.menu_rules::before{
	background-image: url("../pancake99/images/icon_knife_fork.svg");
}
#menu li.menu_faqs::before{
	background-image: url("../pancake99/images/icon_faq.svg");
}


@media only screen and (max-width: 600px){
	#menu ul{
		height: 12vw;
	}
	#menu li{
		font-size: 4vw;
	}
}





/* キービジュアル */
#kv{
	background-image: url("../pancake99/images/pancake99_kv_bg_pattern.png");
	background-size: contain;
	background-repeat: repeat-x;
	background-position: top center;
}
.kv_image{
    width: 100%;
    overflow: hidden;
	display: flex;
	justify-content: center;
}
.kv_image img{
    width: 1000px;
}
@media only screen and (max-width: 720px){
	.kv_image img{ width: 820px; }
}
@media only screen and (max-width: 600px){
    #kv{
        background-image: url("../pancake99/images/pancake_kv_bg_pattern_sp.png");
	}
	.kv_image{
		width: 100%;
	}
	.kv_image img{
		width: 100%;
	}
}

/* 概要 */
#outline{
    max-width: 1200px;
    margin: 2em auto;
	padding: 0 22px;
    display: grid;
    grid-template-columns: minmax(286px, 332px) minmax(260px, 304px) 300px;
    grid-template-areas:
        "area_intro area_intro  area_package"
        "area_info  area_author area_package"
        "area_info  area_price  area_package"
        "area_info  area_button area_package";
	justify-content: space-evenly;
	column-gap: 22px;
}@media only screen and (max-width: 996px){
	#outline{
        grid-template-columns: 1fr minmax(286px, 324px) minmax(260px, 300px) 1fr;
        grid-template-areas:
            "area_intro area_intro area_package area_package"
            "area_left  area_info  area_author  area_right"
            "area_left  area_info  area_price   area_right"
            "area_left  area_info  area_button  area_right";
	}
}@media only screen and (max-width: 660px){
	#outline{
		padding: 0 11px;
        grid-template-columns: 1fr 29px 260px;
        grid-template-areas:
            "area_intro area_package area_package"
            "area_info  area_info  area_author"
            "area_info  area_info  area_price"
            "area_info  area_info  area_button";
	}
}@media only screen and (max-width: 600px){
	#outline{
		padding: 0 1em;
        grid-template-columns: 43vw 43vw;
        grid-template-areas:
            "area_package area_info"
            "area_intro   area_intro"
            "area_author  area_price"
            "area_author  area_button";
		column-gap: 1em;
	}
}

.intro{
    grid-area: area_intro;
	margin-bottom: 2em;
}
.intro p{
    font-size: 22px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	color: #8c6239;
}

.package{
	grid-area: area_package;
	position: relative;
	/*
	background-color: aliceblue;
	*/
}
.package_image{
	margin: 0 auto;
	width: 300px;
}
.package_image img{
	width: 100%;
}
.info{
	grid-area: area_info;
}
.info_table{
	border-collapse: separate;
	border: 1px solid #dd3333;
	border-radius: 20px;
	border-spacing: 0;
	width: 100%;
}
.info_table tr:first-child>th:first-child {
	border-radius: 18px 0 0 0;
	border-bottom: 1px solid white;
}
.info_table tr:first-child>td:last-child {
	border-radius: 0 18px 0 0;
	border-bottom: 1px solid #dd3333;
}
.info_table tr.middle th{
	border-top:  1px solid white;
	border-bottom: 1px solid white;
}
.info_table tr.middle td{
	border-top:  1px solid #dd3333;
	border-bottom: 1px solid #dd3333;
}
.info_table tr:last-child th:first-child {
	border-radius: 0 0 0 18px;
	border-top: 1px solid white;
}
.info_table tr:last-child td:last-child {
	border-radius: 0 0 18px 0;
	border-top: 1px solid #dd3333;
}
.info_table th{
	background-color: #dd3333;
	box-sizing: border-box;
	border: 2px solid #dd3333;
	border-right: none;
	padding: 7px;
	display: flex;
	align-items: center;
}
.info_table td{
	box-sizing: border-box;
	border: 2px solid #dd3333;
	border-left: none;
	color: #dd3333;
	background-color: white;
}
.info_table p{
	font-size: 22px;
	font-weight: bold;
	padding-left: 7px;
}
.info_table th img{
	width: 48px;
	height: 48px;
}
.info_table th p{
	color: white;
}

.author{
	grid-area: area_author;
}
.author p{
	font-size: 18px;
	font-weight: bold;
	color: #8c6239;
}
.author p.authors{
	font-size: 20px;
	padding-bottom: .25em;
	border-bottom: 1px solid #8c6239;
}
.price{
	grid-area: area_price;
}
.price p{
	font-size: 20px;
	line-height: 1;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	color: #e77722;
	text-align: right;
}
.price .price_digits{
	font-size: 30px;
}

/* 購入ボタン */
.buy_button{
	grid-area: area_button;
	display: flex;
	justify-content: center;
	align-items: center;
}
.modal-btn.purchase{
	/* college_2022をキャンセル */
	width: auto;
	height: auto;
	display: flex;
	justify-content: center;
}
.modal-btn.purchase a{
	font-size: 1.5rem;
	line-height: 1;	/* spで必要だった */
	letter-spacing: 0;
	font-weight: bold;
	display: block;
	box-sizing: border-box;
	border-radius: 3rem;
	border: none;
	padding: .75em 2.5em;
	color: #8c6239;
	background-color: #facb27;
}
.modal-btn.purchase a::before{
	content: '　';
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url("../../common/svg/price_tag.svg");
	/*
	background-color: red;
	*/
	background-size: 1em 1em;
	margin-right: .25em;
	filter: invert(39%) sepia(26%) saturate(928%) hue-rotate(349deg) brightness(96%) contrast(85%);
}
/* モーダル subjects_common */
#pancake99 .remodal .modalCloseTop{
	background-color: #8c6239;
}
.remodal .modalCloseTop {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 1.875rem;
	right: 1.25rem;
	cursor: pointer;
	border-radius: 50%;
	overflow: hidden;
}
.remodal .modalCloseTop a {
	display: block;
	width: 100%;
	height: 100%;
}
.remodal .modalCloseTop svg {
	width: 10px;
	height: 10px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}


@media only screen and (max-width: 600px){
    .package_image{
		margin: 0 auto;
        width: 40vw;
		/*
		background-color: azure;
		*/
    }
	.info{
		display: flex;
		align-items: flex-end;
		/*
		background-color: yellow;
		*/
	}
    .info_table{
		width: auto;
		margin-bottom: 2em;
    }
    .info_table p{
        font-size: 3.7vw;
		padding-left: 0;
    }
	.info_table td p{
		padding: 1.8vw;
	}
    .release_date{
        width: 28vw;
        position: absolute;
        right: 10vw;
        top: 34.8vw;
    }
	.intro{
		margin: .5em auto 1em;
	}
	.intro p{ font-size: 4.3vw; }
	.author{
		box-sizing: border-box;
		padding: 1em .25em;
		border: 2px solid #8c6239;
	}
	.author p,
	.author p.authors{
		font-size: 3.7vw;
		text-align: center;
	}
	.author p{
		border-bottom: 1px solid #8c6239;
	}
	.author p.authors{
		margin-top: .5em;
		line-height: 1;
		border-bottom: none;
	}
    .price p{
        font-size: 4.3vw;
		text-align: center;
    }
    .price .price_digits{
        font-size: 5.3vw;
    }
    .modal-btn.purchase{
		width: 100%;
	}
    .modal-btn.purchase a{
		max-width: 43vw;
        font-size: 4.3vw;
        border-radius: 8.6vw;
        padding: .75em 1em;
		/*
		*/
    }
}



/* 動画 */
#movie{
	background-image: url("../pancake99/images/pancake99_movie_bg.svg");
	background-size: 2000px 800px;
	background-repeat: no-repeat;
	background-position: center;
}
.movie_box{
	width:450px;
	margin:1em auto 3em;
}
.copyright{
	margin-top: .25em;
	font-size: 12px;
	color: #8c6239;
	text-align: right;
}
@media only screen and (max-width: 600px){
	#movie{
		background: none;
	}
	.movie_box{
		width: 90%;
		margin: 4em auto;
	}
	.copyright{
		font-size: 3vw;
	}
}

/* アピールポイント */
#pr{
	max-width: 1200px;
	margin: 4em auto 1em;
	min-height: 870px;
	padding-top: 42px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
#point1,
#point2{
	border-radius: 50%;
	/*
	background-color: #fef5d4;
	*/
	background-color: rgba(250, 203, 39, .2);
	display: flex;
	justify-content: center;
	position: relative;
	align-items: center;
}
#point1{
	width: 540px;
	height: 540px;
	margin-left: -50px;
	top: 0;
}
#point1::before{
	content: '';
	width: 330px;
	height: 163px;
	position: absolute;
	background-image: url("../pancake99/images/pancake99_copy_point1.svg");
	background-repeat: no-repeat;
	right: 0;
	top:  -42px;;
}
#point2{
	width: 650px;
	height: 650px;
	margin: auto -50px 0 auto;
}
#point2::before{
	content: '';
	width: 234px;
	height: 156px;
	position: absolute;
	background-image: url("../pancake99/images/pancake99_copy_point2.svg");
	right:  391px;
	bottom: 522px;
}
#pr p{
	font-size: 22px;
	line-height: 2.5;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	color: #8c6239;
}
#pr p .emphasis{
	font-size: 28px;
	background: linear-gradient(transparent 60%, #fde593 60%);
}
#pr #point1 p{
	padding: 0 calc(25px + 1em) 0 calc(50px + 1em);
}
#pr #point2 p{
	padding: 0 calc(50px + .25em) 0 calc(25px + 1em);
}
#pr #point1 img{
	position: absolute;
	left: 90px;
	top: 320px;
}
#pr #point2 img{
	position: absolute;
	left: 272px;
	top:  -60px;
}
@media only screen and (max-width: 1200px){
	#pr{ overflow: hidden; }
}@media only screen and (max-width: 1120px){
    #pr #point1 img{
        left: 60px;
    }
}@media only screen and (max-width: 1024px){
    #pr #point1 img{
        left:  0;
		top: -30px;
		/*
		z-index: -1;
		*/
    }
	#pr #point2{
		margin-top: 2.5em;
	}
}@media only screen and (max-width: 800px){
    #pr #point2{
        margin-top: 3.5em;
    }
}@media only screen and (max-width: 680px){
    #pr #point2{
        margin-top: 6em;
    }
}@media only screen and (max-width: 600px){
	#pr{
		padding-top: 12vw;
		min-height: auto;
		margin: 17vw auto 40vw;
		gap: 0;
	}
    #pr p{
		font-size: 4vw;
		line-height: 1.8;
		/*
		background-color: yellow;
		*/
	}
    #pr p .emphasis{ font-size: 4.5vw; }
    #pr #point1 p{
        padding: 0 calc(6.6vw + 1em) 0 calc(6.6vw + 1em);
    }
    #pr #point2 p{
        padding: 0 calc(13.3vw + .25em) 0 calc(2vw + 1em);
    }
    #point1{
        width: 93.3vw;
        height: 93.3vw;
        margin: 0 0 0 -3.3vw;
        top: 0;
    }
    #point1::before{
        content: '';
        width: 57vw;
        height: 28.2vw;
        position: absolute;
        background-image: url("../pancake99/images/pancake99_copy_point1.svg");
        background-repeat: no-repeat;
        right: 0;
        top:  -7.3vw;;
    }
	#pr #point1 img{
		width: 93.3vw;
		top: -10vw;
	}
    #point2{
        width: 107vw;
        height: 107vw;
        margin: 0 -10.3vw 0 0;
    }
    #point2::before{
        content: '';
        width: 38.4vw;
        height: 25.6vw;
        right:  64.2vw;
        bottom: 85.6vw;
    }
    #pr #point2 img{
        left: 42vw;
        top:  -15vw;
		width: 49.2vw;
		overflow: hidden;
    }

	
}



/* 遊び方 */
#rules{
    max-width: 1344px;
	min-height: 1344px;
    margin: 4em auto;
	background-image: url("../pancake99/images/pancake99_pancake.png"),
					  url("../pancake99/images/pancake99_mouse@2x.png");
	background-size: 1344px 1344px,
					  318px  246px;
	background-repeat: no-repeat,
					   no-repeat;
	background-position: center top,
						 right top;
}
.rule_area{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1em;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/*
	background-color: yellow;
	*/
}
.rule_headline{
	width: 660px;
	height: 83px;
	margin-top: -63px;
	/*
	background-color: azure;
	*/
}
.rule_headline img{
	width: 100%;
}
@media only screen and (max-width: 1344px){
	#rules{
		background-position: center top,
							 right calc((100vw - 1344px) / 2) top;
	}
}@media only screen and (max-width: 720px){
	.rule_headline{
		width: 100%;
		margin-top: -54px;
		/*
		overflow: hidden;
		*/
	}
}@media only screen and (max-width: 600px){
	#rules{
		height: auto;
		background: none;
		margin-top: 1em;
		padding: 0;
		/*
		background-color: azure;
		*/
	}
    .rule_area{
        padding: 0;
    }
	.rule_headline{
		width: 100%;
		height: auto;
		/*
		margin-top: -0vw;
		*/
		margin-bottom: -8vw;
	}
}

/* 遊び方｜ナビゲーション */
#navi_btn_area input{ display: none; }
#navi_btn_area input:checked + label{
	background-color: #8c6239;
	color: white;
}
#navi_btn_area{
	width: 674px;
	height: 98px;
	font-size: 20px;
	margin: 140px auto 25px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/*
	background-color: lightblue;
	*/
}
#navi_btn_area label{
	width: 320px;
	height: 40px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	color: #8c6239;
	border-radius: 21px;
	border: 1px solid #8c6239;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media only screen and (max-width: 720px){
	#navi_btn_area{
		width: 100%;
		font-size: 18px;
	}
	#navi_btn_area label{
		width: calc((100% - .5em) / 2 );
	}
}@media only screen and (max-width: 600px){
	#navi_btn_area{ display: none; }
}


.rule_box{
	max-width: 960px;
	width: calc(100% - 2em);
	display: none;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	/*
	background-color: yellow;
	*/
}@media only screen and (max-width: 720px){
	.rule_box{ width: calc(100% - 1em); }
}@media only screen and (max-width: 600px){
	.rule_box{
		width: 100%;
		height: auto;
		min-height: 210vw;
		padding: 0;
		background-size: 210vw 210vw;
		background-repeat: no-repeat;
		background-position: top center;
		display:  flex;
		gap: 5vw;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/*
		background-color: yellow;
		*/
		background-image: url("../pancake99/images/pancake99_bg_pancake_sp.png");
	}
	.rule_box:nth-of-type(4n+1){
		background-image: url("../pancake99/images/pancake99_bg_pancake_mouse_sp.png");
		background-position: top center;
	}
}
.rule_box#competition{
	display:flex;
}
.rule_box .game_title{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
}
.rule_box .number{
	width: 74px;
	height: 74px;
	background-image: url("../pancake99/images/pancake99_bg_plate.png");
	background-size: contain;
	font-size: 40px;
	line-height: 1.65;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	color: #8c6239;
	text-align: center;
	z-index: 2;
}
.rule_box .game_title_text{
	font-size: 26px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	color: #8c6239;
}
@media only screen and (max-width: 600px){
	.rule_box{
		gap: 4vw;
	}
	.rule_box .number{
		width: 12vw;
		height: 12vw;
		font-size: 6.4vw;
	}
	.rule_box .game_title_text{
		font-size: 4.8vw;
		margin-bottom: 0;
	}
}

.rule_box .information{
	width: 560px;
	height: 165px;
	box-sizing: border-box;
	padding: 24px;
	border-radius: 18px;
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	/*
	justify-content: flex-start;
	*/
}
.rule_box .information li{
	font-size: 20px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	color: #8c6239;
	/*
	background-color: aliceblue;
	*/
}
.rule_box .info_head{
	display: inline-block;
	font-size: 18px;
	/*
	line-height: 2;
	*/
	color: white;
	border-radius: 18px;
	padding: .25em 1em;
	margin-right: .5em;
	background-color: #e77722; 
}
@media only screen and (max-width: 720px){
	.rule_box .information{
		width: calc(100% - 1em);
		height: auto;
		gap: 1em;
	}
}@media only screen and (max-width: 600px){
	.rule_box .information{
		width: calc(100% - 1em);
		padding: 2vw 6vw;
		gap: 2vw;
		justify-content: flex-start;
		/*
		background-color: yellow;
		*/
	}
	.rule_box .info_head{
		font-size: 4.3vw;
		border-radius: 4.3vw;
		padding: .1em 1em;
	}
	.rule_box .information li{
		font-size: 4.8vw;
	}
}

.rule_box .photo_and_text{
	max-width: 900px;
	height: 322px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	/*
	background-color: yellow;
	*/
}
.rule_box .photo{
	width: 420px;
	/*
	height: 234px;
	*/
	border-radius: 18px;
	overflow: hidden;
}
.rule_box .suit_for{
	width: calc(100% - 420px);
	max-width: 420px;
	font-size: 18px;
	padding: 1.25em 2em;
	background-color: rgba(255, 255, 255, .5);
	margin-left: -1em;
	margin-top: auto;
	margin-bottom: 0;
	position: relative;
}
.rule_box .suit_for::before{
	content: "　こんな人におすすめ　";
	position: absolute;
	top: -1.5em;
	right: 0;
	border-radius: .5em .5em 0 0;
	background-color: white;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	color: #e77722;
}
.rule_box .photo img{
	width: 100%;
}
@media only screen and (max-width: 720px){
	.rule_box .photo_and_text{
		height: 276px;
	}
	.rule_box .photo{
		width: 360px;
		object-fit: contain;
	}
	.rule_box .suit_for{
		width: calc(100% - 360px + 1em);
	}
}@media only screen and (max-width: 680px){
	.rule_box .photo{
		width: 320px;
	}
}@media only screen and (max-width: 600px){
	.rule_box .photo_and_text{
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
		margin-top: 2em;
		width: calc(100% - 1em);
		height: auto;
		/*
		background-color: yellow;
		padding-left: 0;
		*/
	}
	.rule_box .suit_for{
		font-size: 4.3vw;
		width: calc(100% - 2em);
		padding: 1em;
		max-width: none;
		margin-left: 0;
	}
	.rule_box .suit_for::before{
		font-size: 4.3vw;
		right: calc(50% - 5.5em);
	}
	.rule_box .photo{
		margin-top: 1em;
		width: 64vw;
		height: 36vw;
	}
	.rule_box .photo img{
		width: 100%;
	}
}

.rule_box .extras{
	max-width: 960px;
	width: calc(100% - 1em);
	height: 70px;
    display: flex;
	z-index: 2;
}
.rule_box .extras p{
	font-size: 20px;
	font-weight: bold;
	color: #8c6239;
	/*
	padding: 20px auto 20px;
	*/
	position: relative;
}
.rule_box .movie_button,
.rule_box .accordion_button,
.rule_box .manual_button{
	background-color: white;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 4px solid white;
	padding-right: 1.1em;
}
.rule_box .movie_button{
	border-radius: 35px 0 0 35px;
	border-right: 1px inset #8c6239;
}
/* ボタン使えない */
.rule_box .movie_button.disable{
	cursor: not-allowed;
	background-color:#bbb;
	border: #bbb;
}
.rule_box .movie_button.disable .movie_text{
	color:#ddd;
}
.rule_box .movie_button.disable .movie_text::after{
	filter: invert(92%) sepia(1%) saturate(967%) hue-rotate(140deg) brightness(123%) contrast(73%);
}

.rule_box .accordion_button{
	border-left:  1px inset #8c6239;
	border-right: 1px inset #8c6239;
	transition: 500ms;
}
.rule_box .manual_button{
	border-left:  1px inset #8c6239;
	border-radius: 0 35px 35px 0;
}
.rule_box .movie_text::after{
	content: "";
	width: 1.1em;
	height: 1.1em;
	background-image: url("../pancake99/images/icon_movie.svg");
	filter: invert(39%) sepia(26%) saturate(928%) hue-rotate(349deg) brightness(96%) contrast(85%);
	position: absolute;
	top: .2em;
	right: -1em;
}
.manual_text::after{
	content: "";
	width: 1.1em;
	height: 1.1em;
	background-image: url("../pancake99/images/icon_download.svg");
	filter: invert(39%) sepia(26%) saturate(928%) hue-rotate(349deg) brightness(96%) contrast(85%);
	position: absolute;
	top: .2em;
	right: -1.5em;
}
.rule_box .accordion_text::after{
	content: "";
	width: 1.1em;
	height: 1.1em;
	background-image: url("../pancake99/images/icon_accordion.svg");
	filter: invert(39%) sepia(26%) saturate(928%) hue-rotate(349deg) brightness(96%) contrast(85%);
	position: absolute;
	top: .2em;
	right: -1.5em;
}
.rule_box .accordion_button input{ display: none; }
.rule_box .accordion_button input + label .accordion_text::after{
	transition: 500ms;
}
.rule_box .accordion_button input:checked + label .accordion_text::after{
	transform: rotateX(180deg);
}
@media only screen and (max-width: 1024px){
	.rule_box .movie_text::after{
		right: -1.5em;
	}
}@media only screen and (max-width: 720px){
	.rule_box .extras{
		width: 100%;
	}
}@media only screen and (max-width: 600px){
	.rule_box .extras{
		display: grid;
		height: auto;
		grid-template-columns: 1fr 1fr;
		column-gap: 2vw;
		row-gap: 2vw;
		grid-template-areas:
			"area_movie area_manual"
			"area_accordion area_accordion";
		place-items: center;
	}
	.rule_box .extras p{
		font-size: 4.3vw;
	}
    .rule_box .movie_button,
    .rule_box .accordion_button,
    .rule_box .manual_button{
		width: 44vw;
		height: 8vw;
		font-size: 4.3vw;
		border-radius: 4.3vw;
		border: 2px solid #8c6239;
	}
	.rule_box .movie_button{
		grid-area: area_movie;
	}
	.rule_box .accordion_button{
		grid-area: area_accordion;
	}
	.rule_box .manual_button{
		grid-area: area_manual;
		align-self: center;
	}
}



.rule_box .detail_outer{
	max-width: 900px;
	width: calc(100% - 2em - 60px);
	margin: -20px auto 2em;
	padding: 0 30px;
	display: none;
	transition: 500ms;
}
.rule_box .detail_area{
	/*
	width: 100%;
	*/
	background-color: #f9f5e4;
	padding: 1em;
}
.rule_box .detail_headline{
	display: inline-block;
	font-size: 20px;
	margin-left: 1em;
	height: 2.25em;
	line-height: 2.25;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	color: white;
	background-color: #03b8df;
	position: relative;
}
.rule_box .detail_headline::before{
	content: "";
	width: 1em;
	height: 2.25em;
	background-image: url("../pancake99/images/pancake99_detail_head_first.svg");
	position: absolute;
	left: -.9em;
}
.rule_box .detail_headline::after{
	content: "";
	width: 1em;
	height: 2.25em;
	background-image: url("../pancake99/images/pancake99_detail_head_last.svg");
	position: absolute;
	right: -.9em;
}
.rule_box .item_list{
	margin: 1em auto 1.5em;
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}
.rule_box .item_list li::before{
	content: "●";
	color: #e77722;
	margin-right: .25em;
}
.rule_box .detail_text{
	margin: 1em auto 1.5em;
}
.rule_box .preparation,
.rule_box .steps{
	margin: 1em auto 1.5em;
	counter-reset: listnum;
}
.rule_box .preparation li,
.rule_box .steps li{
	position: relative;
	padding-left: 1.25em;
	margin-bottom: .5em;
}
.rule_box .preparation li::before,
.rule_box .steps li::before{
	counter-increment: listnum;
	content: counter(listnum);
	color: white;
	font-weight: bold;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background-color: #03b8df;
	position: absolute;
	left: 0;
	top: .125em;
	display: flex;
	justify-content: center;
	align-items: center;
}
.rule_box .steps li::before{
	background-color: #e77722;
}
.rule_box .step_title{
	font-weight: bold;
	color: #e77722;
}
.rule_box .troubleshooting{
	width: calc(100% - 2em);
	background-color: white;
	padding: 1em;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/*
	display: none;
	*/
}
.rule_box .troubleshoot_title{
	display: inline-block;
	padding: 0 1.5em;
	background-image: url("../pancake99/images/troubleshoot_title_first.svg"),
					  url("../pancake99/images/troubleshoot_title_last.svg");
	background-size: 1.5em 2.375em,
					 1.5em 2.375em;
	background-repeat: no-repeat,
					   no-repeat;
	background-position: left top,
						 right top;
	font-weight: bold;
	font-size: 1em;
	line-height: 2.375;
	color: #03b8df;
	box-sizing: border-box;
	position: relative;
	top: -2.1875em;
}
.rule_box .troubleshoot_title span{
	display: inline-block;
	line-height: 2.25;
	box-sizing: border-box;
	border-top: 1px solid #03b8df;
	border-bottom: 1px solid #03b8df;
	background-color: white;
}
.rule_box .troubleshoot_subtitle{
	font-weight: bold;
	color: #e77722;
	margin-top: -2em;
}
@media only screen and (max-width: 720px){
	.rule_box .detail_outer{
		width: calc(100% - 2em);
		padding: 0;
	}
	.rule_box .detail_area{
		/*
		width: calc(100% - 2em);
		background-color: aliceblue;
		*/
	}
}@media only screen and (max-width: 600px){
	.rule_box .detail_outer{
		margin-top: -2em;
		width: 96%;
		position: relative;
		z-index: 0;
	}
	.rule_box .detail_outer{
		font-size: 4.3vw;
	}
	.rule_box .detail_headline{
		font-size: 4.3vw;
	}
	.rule_box .item_list{
		margin: 1em auto 1.5em;
		gap: .5em;
	}

}

/* 監修 */
#supervisor{
	max-width: 1100px;
	/*
	width: calc(100% - 2em);
	*/
	margin: 2em auto;
	padding: 1em;
	border: 5px dotted #8c6239;
	/*
	background-image: radial-gradient(circle, #8c6239 4px, transparent 4px), radial-gradient(circle, #8c6239 4px, transparent 4px), radial-gradient(circle, #8c6239 4px, transparent 4px), radial-gradient(circle, #8c6239 4px, transparent 4px);
	background-position: left top, right top, left bottom, left top;
	background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
	background-size: 26px 8px, 8px 26px, 26px 8px, 8px 26px;
	*/
	
	display: grid;
	grid-template-columns: 210px 1fr;
	grid-template-rows: 50px 180px 1fr;
	grid-template-areas:
		"area_supervisor area_text"
		"area_photo      area_text"
		"area_name       area_text";
	position: relative;
}




.supervisor{
	grid-area: area_supervisor;
	display: flex;
	position: relative;
	top: -2.5em;
	left: 0;
}
.supervisor p{
	background-color: #8c6239;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 2.5;
	color: white;
	padding-left: 1.25em;
	padding-right: 1.25em;
}
.supervisor_image{
	grid-area: area_photo;
	/*
	background-color: yellow;
	*/
	display: flex;
	justify-content: center;
	align-items: center;
}
.supervisor_image img{
	width: 180px;
	height: 180px;
	border-radius: 90px;
}
.supervisor_name{
	grid-area: area_name;
	/*
	background-color: yellowgreen;
	*/
	color: #8c6239;
	margin-bottom: 1em;
}
.supervisor_name p{
	font-size: 25px;
	font-weight: bolder;
	text-align: center;
}
.supervisor_name p.supervisor_title{
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
.supervisor_text{
	grid-area: area_text;
	align-self: center;
}
.supervisor_text .balloon{
	margin: 1em;
	padding: 1em;
	background-color: #f9f5e4;
	border-radius: 1em;
	position: relative;
}
.supervisor_text .balloon::before{
	content: "";
	position: absolute;
	top: 50%;
	left: -2em;
	margin-top: -1em;
	border: 1em solid transparent;
	border-right: 1em solid #f9f5e4;
}

.supervisior_subtitle{
	margin-top: 1em;
	font-weight: bold;
	color: #8c6239;
	padding: 0 1em;
}
.supervisior_subtitle + p{
	padding: 0 1em;
}
.supervisor_link{
	padding: 0 1em;
	color: #03b8df;
	font-weight: bold;
}
.supervisor_link::before{
	content: '';
	display: inline-block;
	width: 150px;
	height: 21px;
	background-image: url("../pancake99/images/logo_mathchannel.png");
	background-size: contain;
	vertical-align: middle;
	margin-right: .5em;
}
.supervisor_link a::after{
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url("../pancake99/images/icon_link.svg");
	filter: invert(54%) sepia(77%) saturate(1672%) hue-rotate(150deg) brightness(96%) contrast(98%);
}
@media only screen and (max-width: 1140px){
	#supervisor{
		margin-left: .5em;
		margin-right: .5em;
	}
}
@media only screen and (max-width: 600px){
    #supervisor{
        grid-template-columns: 1fr 56vw;
        grid-template-rows: 10vw 40vw 1fr;
        grid-template-areas:
            "area_supervisor area_supervisor"
            "area_photo      area_name"
            "area_text       area_text";
		padding: 1em .25em 2em;
    }
	.supervisor p{
		width: 100%;
		font-size: 4.3vw;
		text-align: center;
		padding: 0;
	}
    .supervisor_text .balloon{
        margin: 0;
        background-color: rgba(255, 255, 255, 0);
    }
    .supervisor_text .balloon::before{
        display: none;
    }

	
	.supervisor_image img{
		width: 30.6vw;
		height: 30.6vw;
		border-radius: 15.3vw;
	}
	.supervisor_name{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding-left: 1em;
	}
	.supervisor_name p{ font-size: 5.3vw; }
	.supervisor_name p.supervisor_title{ font-size: 3.7vw; }
	.supervisor_text{ font-size: 4.3vw; }
}

/* 埋め草 */
.intermission{
	width: 200px;
	margin: 0 auto 3em;
}
.intermission img{
	width: 100%;
}
@media only screen and (max-width: 600px){
	.intermission{ width: 27vw;	}
}

/* よくある質問 */
#faq{
	max-width: 960px;
	margin: 1em auto;
	/*
	background-color: yellow;
	*/
}
#faq h4{
	display: inline-block;
	font-family: "M PLUS Rounded 1c", sans-serif;
	color: #8c6239;
	border: 1px solid #8c6239;
	background-color: white;
	padding: .25em 1em;
	margin-top: 1em;
}
#faq h3,
#enclosed h3{
	width: 560px;
	height: 40px;
	margin: 0 auto;
	background-image: url("../pancake99/images/pancake99_contact_bg.svg");
	background-size: 560px 40px;
	background-repeat: no-repeat;
	background-position: center;
	font-weight: bold;
	font-size: 25px;
	text-align: center;
	margin-bottom: 1em;
	/*
	background-color: rebeccapurple;
	*/
}
#faq details{
	font-family: "M PLUS Rounded 1c", sans-serif;
	transition: 500ms;
}
#faq summary{
	font-size: 20px;
	font-weight: 700;
	color: #8c6239;
	/*
	display: flex;
	justify-content: space-between;
	align-items: center;
	*/
	list-style-type: none;
	display: grid;
	grid-template-columns: 60px 1fr 25px;
	align-items: center;
}
#faq summary::-webkit-details-marker { display: none }
#faq summary::before,
#faq .answer::before{
	content: "Q.";
	font-size: 45px;
}
#faq summary::after{
	content: "";
	width: 1.1em;
	height: 1.1em;
	background-image: url("../pancake99/images/icon_accordion.svg");
	filter: invert(39%) sepia(26%) saturate(928%) hue-rotate(349deg) brightness(96%) contrast(85%);
}

#faq .answer{
	border-top: 2px solid #8c6239;
	padding: 1em 0;
	display: flex;
	align-items: flex-start;
}
#faq .answer::before{
	content: "A.";
	width: 60px;
	font-weight: 700;
	color: #8c6239;
}
#faq .answer p{
	display: inline-block;
}
#faq details[open] summary::after{
	transform: rotateX(180deg);
}
#faq .answer picture,
#faq .answer img{
	margin-left: 1em;
}

@media only screen and (max-width: 1024px){
	#faq{
		width: calc(100% - 1em);
	}
	#faq .answer p{
		flex:1;
	}
}@media only screen and (max-width: 600px){
	#faq{
		width: calc(100% - 1em);
		margin: 0 .5em 4em;
		/*
		background-color: aqua;
		*/
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
    #faq h4{
        margin: 0 auto 1em;
		font-size: 4vw;
    }
	#faq h3,
	#enclosed h3{
			width: 91vw;
            height: 6.5vw;
            background-size: 91vw 6.5vw;
            font-size: 5vw;
	}
	#faq details{
		width: calc(100% - 1em);
	}
	#faq summary{
		font-size: 4vw;
		margin-bottom: 1.5em;
		grid-template-columns: 8vw 1fr;
		/*
		display: inline-block;
		*/
	}
	#faq summary::after{
		/*
		background-color: red;
		*/
		padding-right: 4vw;
		background-repeat: no-repeat;
	}
	#faq .answer{
		width: 100%;
		font-size: 4vw;
		display: grid;
		grid-template-columns: 8vw 1fr;
		row-gap: .5em;
	}
	#faq summary::before,
	#faq .answer::before{
		font-size: 5.4vw;
		align-self: start;
		/*
		background-color: red;
		*/
	}
	#faq summary::after{
		/*
		grid-area: 2 / 1 / 3 / 3;
		grid-column: span 2;
		text-align: center;
		grid-area: q_arrow;
		align-self: center;
		background-color: red;
		*/
		margin: 0 auto;
	}
	#faq .answer picture{
		width: 67vw;
		/*
		width: calc(100% - 8vw - 10em);
		align-self: center;
		display: inline-block;
		*/
		margin: 0 auto;
	}
	#faq .answer img{
		width: 100%;
	}
		
}

/* 商品詳細 */
#enclosed{
	max-width: 600px;
	margin: 4em auto 2em;
}
.enclosed_photo_text{
	display: grid;
	grid-template-columns: 350px 1fr;
	column-gap: 2em;
	grid-template-areas:
		"area_photo  area_subtitle"
		"area_photo  area_list";
}
.enclosed_photo{
	grid-area: area_photo;
}
.enclosed_subtitle{
	grid-area: area_subtitle;
	font-size: 16px;
	color: #808080;
	font-weight: bold;
	margin-bottom: .5em;
}
.enclosed_lists{
	grid-area: area_list;
}
.enclosed_lists li{
	font-size: 14px;
	line-height: 2;
	list-style-type: disc;
	margin-left: 1.5em;
}
@media only screen and (max-width: 660px){
	#enclosed{
		width: calc(100% - 1em);
	}
	.enclosed_photo_text{
		grid-template-columns: 320px 1fr;
		column-gap: 1em;
	}
	.enclosed_photo{
		width: 320px;
	}
	.enclosed_photo img{
		width: 100%;
	}
	.enclosed_lists li{
		line-height: 1.8;
	}
}@media only screen and (max-width: 600px){
	.enclosed_photo_text{
		grid-template-columns: 1fr;
		grid-template-areas:
			"area_subtitle"
			"area_photo"
			"area_list";
		/*
		justify-content: center;
		align-content: center;
		align-items: center;
		*/
		justify-items: center;
	}
	.enclosed_photo{
		width: 90%;
	}
	.enclosed_subtitle{
		font-size: 4.4vw;
	}
	.enclosed_lists{
		margin-top: 1em;
	}
	.enclosed_lists li{
		font-size: 3.8vw;
	}
}

/* 商品情報 */
#colophone{
	max-width: 960px;
	margin: 0 auto 4em;
	padding: 2em 2em;
	background-color: #e6e6e6;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2em;
}
#colophone h3{
	font-size: 16px;
	grid-column: span 2;
}
#colophone li.indent4{
	text-indent: -4em;
	padding-left: 4em;
}
#colophone li.indent5{
	text-indent: -5em;
	padding-left: 5em;
}
#colophone li.indent8{
	text-indent: -8em;
	padding-left: 8em;
}
@media only screen and (max-width: 1024px){
	#colophone{
		margin: 0 1em 4em 1em;
	}
}@media only screen and (max-width: 720px){
	#colophone{
		margin: 0 .5em 4em .5em;
		column-gap: 1.25em;
	}
}@media only screen and (max-width: 720px){
	#colophone{
		grid-template-columns: 1fr;
		padding: 1.5em;
	}
	#colophone h3{
		grid-column: span 1;
		font-size: 3.8vw;
	}
	#colophone li{
		font-size: 3.8vw;
	}
}

/* お問い合わせ */
#contact{
	margin: 8em auto 0;
	padding-bottom: 2em;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: url("../pancake99/images/pancake99_bottom.svg");
	background-size: 60px 60px;
	background-position: top center;
}
#contact picture{
	margin-top: -75px;
}
#contact h3{
	font-weight: bold;
	font-size: 25px;
	/*
	background-color: azure;
	*/
	text-align: center;
	margin: 1em auto;
}
#contact p{
	font-size: 20px;
}
@media only screen and (max-width: 600px){
	#contact picture,
	#contact img{
		width: 27vw;
		margin-top: -5vw;
	}
	#contact h3{
		font-size: 4.3vw;
	}
	#contact p{
		font-size: 3.8vw;
	}
}