/*----------------------------------------------------
** WEB COMBO / exsample.css *ページに合わせてファイル名を変更する
** Ver.1.0.0
** copyright 2020 GRANTEST Inc.
**----------------------------------------------------
** Common settings
**----------------------------------------------------*/

/*共通のスタイルをここに記載*/
header{
	position: -webkit-sticky;
}
footer{
	background-color: #fff !important;
}
/*----------------------------------------------------
** header
**----------------------------------------------------*/
/* menubtn ※最大3個推奨 */
/* メニューに表示される文字 */
.menubtn::before{
	content:'BUTTON';
}
.menubtn.navi::before{
	content:'MENU';
	font-size:10px !important;
	line-height:0 !important;
}
.menubtn.fee::before{
	content:'CHARGE';
}
/* メニューに表示されるアイコン */
.menubtn div.icon{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23103656" d="M16 0c-8.836 0-16 7.164-16 16 0 8.835 7.164 16 16 16 8.835 0 16-7.165 16-16 0-8.836-7.165-16-16-16zM16 30c-7.718 0-14-6.282-14-14 0-7.719 6.282-14 14-14s14 6.281 14 14c0 7.718-6.282 14-14 14zM16 4c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zM16 26c-5.514 0-10-4.486-10-10s4.486-10 10-10 10 4.486 10 10-4.486 10-10 10z" /></svg>');
}
.menubtn.navi div.icon{
	background-image:url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23103656%22%20d%3D%22M6.933%209.2h18.133c0.368%200%200.667-0.299%200.667-0.667s-0.299-0.667-0.667-0.667h-18.133c-0.368%200-0.667%200.299-0.667%200.667s0.299%200.667%200.667%200.667zM25.067%2015.333h-18.133c-0.368%200-0.667%200.299-0.667%200.667s0.299%200.667%200.667%200.667h18.133c0.368%200%200.667-0.299%200.667-0.667s-0.299-0.667-0.667-0.667zM25.067%2022.8h-18.133c-0.368%200-0.667%200.299-0.667%200.667s0.299%200.667%200.667%200.667h18.133c0.368%200%200.667-0.299%200.667-0.667s-0.299-0.667-0.667-0.667z%22%20%2F%3E%3C%2Fsvg%3E') !important;
}
.menubtn.fee div.icon{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23103656" d="M4.974 4.267l3.126 20.321 7.9 2.873 7.901-2.873 3.125-20.321h-22.052zM22.742 8.633l-5.676 5.676v0.092h4.159c0.589 0 1.067 0.477 1.067 1.067s-0.478 1.067-1.067 1.067h-4.159v1.6h4.159c0.589 0 1.067 0.477 1.067 1.067s-0.478 1.067-1.067 1.067h-4.159v2.133c0 0.59-0.478 1.067-1.067 1.067s-1.067-0.477-1.067-1.067v-2.133h-4.159c-0.589 0-1.067-0.477-1.067-1.067s0.478-1.067 1.067-1.067h4.159v-1.6h-4.159c-0.589 0-1.067-0.477-1.067-1.067s0.478-1.067 1.067-1.067h4.159v-0.092l-5.676-5.676c-0.417-0.417-0.417-1.091 0-1.508s1.091-0.417 1.508 0l5.234 5.234 5.234-5.234c0.417-0.417 1.091-0.417 1.508 0s0.416 1.091 0 1.508zM0 0l4.267 27.733 11.733 4.267 11.733-4.267 4.267-27.733h-32zM25.817 26.16l-9.817 3.57-9.817-3.57-3.697-24.027h27.027l-3.697 24.027z" /></svg>');
}
.menubtn div.icon{
	color:#103656;
}
header div.header .menubtn{
	width:30px;
	height:30px;
	margin:-5px 0 0 0;
}
.menubtn div.icon{
	margin:0 !important;
}
div.header .menubtn div.icon{
	height:30px;
	width:30px;
	background-size:30px;
}
/*----------------------------------------------------
** top slider
**----------------------------------------------------*/
div.slidercontents{
}
div.slidercontents div{
	width:100%;
}
div.slidercontents div picture{
	position:relative;
	z-index:1;
}
div.slidercontents div picture img{
	width:100%;
	object-fit:cover;
}
/*----------------------------------------------------
** main column contents
**----------------------------------------------------*/
/* border-color */
section.headermenu dl.box_01 dt,
section.maincolumn > section dl.box_01 dt,
section.headermenu dl.box_01 dt p,
section.maincolumn > section dl.box_01 dt p,
section.headermenu div.listwrap ul li,
section.maincolumn > section div.listwrap ul li,
section.headermenu div.listwrap ul li dt,
section.maincolumn > section div.listwrap ul li dt,
section.headermenu div.listwrap ul li dd time,
section.maincolumn > section div.listwrap ul li dd time,
section.headermenu div.titlebox p,
section.maincolumn > section div.titlebox p,
section.headermenu div.titlebox,
section.maincolumn > section div.titlebox,
section.headermenu dl.fee_02,
section.maincolumn > section dl.fee_02,
section.headermenu dl.check dd ul li::after,
section.maincolumn > section dl.check dd ul li::after{
	border-color:#e95504;
}
/* block title */
section.maincolumn > section.guide div.title::before{
	content:"Beginner's Guide"
}
section.maincolumn > section.system div.title::before{
	content:"Usage fee and system"
}
section.maincolumn > section.preparation div.title::before{
	content:"Advance preparation"
}
section.maincolumn > section.terms div.title::before{
	content:"Terms of service"
}
section.maincolumn > section.faq div.title::before{
	content:"Frequently asked questions"
}
section.maincolumn > section.information div.title::before{
	content:"Information"
}
section.maincolumn > section.staff div.title::before{
	content:"Cast list"
}
section.maincolumn > section.privacypolicy div.title::before{
	content:"Privacy Policy"
}
section.maincolumn > section.contact div.title::before{
	content:"Contact Us"
}
/* flow type list */
section.headermenu dl.flow dd ul li::after,
section.maincolumn > section dl.flow dd ul li::after{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23333" d="M21.333 10.667c0 5.891-4.776 10.667-10.667 10.667s-10.667-4.776-10.667-10.667c0-5.891 4.776-10.667 10.667-10.667s10.667 4.776 10.667 10.667z" /></svg>');
}
section.headermenu dl.flow dd ul li > p::after,
section.maincolumn > section dl.flow dd ul li > p::after{
	border-color:#333 transparent transparent transparent;
}
/* background color */
footer{
	background-color: #fff;
}
footer div.dataarea dl dt{
}
footer div.dataarea dl dt figure{
	width: 257.333px;
}
footer div.dataarea dl dt figure img{
	width: 100%;
	object-fit: cover;
}
section.catchcopy::before{
	opacity:1;
}
@media only screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){
	
	/*レティーナディスプレイ用のスタイルをここに記載*/
	
}
@media screen and (max-width:767px){
	
	/*スマートフォン用のスタイルをここに記載*/
	/*header
	-----------------------------*/
	header + *{
		margin-top:-45px;
	}
	body.safari header div.logo picture img{
		width:auto;
	}
	div.pcmenu{
		display:none;
	}
	div.headerlogo span:not(.none){
		font-size:14px;
	}
	/*メニュー*/
	div.sitemenu{
		padding:0 !important;
	}
	div.contact{
		padding:25px 20px 25px 20px;
		background-color:#fff;
		width:100%;
		box-sizing:border-box;
	}
	div.contact_area{
		padding-top: 2em !important;
		box-sizing:border-box !important;
	}
	h3.contact_title{
		background-color:#103656;
		padding:5px 10px;
		border-radius:10px;
		display:table;
		margin:0 auto;
		color:#fff;
		font-size:18px;
	}
	div.cotact_tel{
	}
	div.cotact_tel dl{
		padding:20px 0;
	}
	div.cotact_tel dl dt{
		margin:0 0 5px 0;
	}
	div.cotact_tel dl dt div{
		margin-bottom: 1rem;
	}
	div.cotact_tel dl dt div a{
		font-size:28px;
		color:#103656;
		padding:0 0 0 45px;
		position:relative;
		z-index:1;
		display:table;
		margin:0 auto;
	}
	div.cotact_tel dl dt div a::before{
		content:"";
		position:absolute;
		left:0;
		top:0;
		background-size:40px;
		width:40px;
		height:40px;
		background-position:center;
		background-repeat:no-repeat;
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23103656" d="M23.026 21.241c-0.819-0.393-1.614-0.826-2.382-1.3-0.276-0.171-0.671-0.182-0.944-0.034-0.448 0.244-0.903 0.474-1.366 0.691-0.298 0.14-0.607 0.126-0.873-0.025-1.257-0.715-2.407-1.595-3.423-2.61s-1.895-2.166-2.61-3.423c-0.151-0.265-0.164-0.575-0.025-0.874 0.218-0.463 0.448-0.918 0.691-1.366 0.148-0.272 0.135-0.665-0.034-0.943-0.473-0.769-0.908-1.564-1.3-2.382-0.286-0.596-1.038-0.626-1.407-0.29-0.629 0.572-1.185 1.222-1.649 1.937 0.483 3.543 2.13 6.721 4.542 9.133s5.588 4.059 9.132 4.543c0.716-0.465 1.366-1.021 1.937-1.65 0.336-0.37 0.307-1.122-0.289-1.407zM16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16c8.837 0 16-7.164 16-16s-7.163-16-16-16zM16 30.667c-8.1 0-14.667-6.566-14.667-14.667s6.566-14.667 14.667-14.667c8.101 0 14.667 6.566 14.667 14.667s-6.564 14.667-14.667 14.667z" /></svg>');
	}
	div.cotact_tel dl dd{
		display:flex;
	}
	div.cotact_tel dl dd p{
		font-size:14px;
		text-align:center;
	}
	div.cotact_tel dl dd p:nth-of-type(1){
		width: 60%;
	}
	div.cotact_tel dl dd p:nth-of-type(2){
		width: 40%;
	}
	div.cotact_tel dl dd p span{
		margin:0 5px 0 0;
		border-radius:5px;
		color:#103656;
		font-size: 12px;
	}
	div.contact_mail{
		margin:10px 0 0 0;
	}
	div.contact_mail dl{
		margin:0 0 10px 0;
	}
	div.contact_mail dl dt{
		margin:0 0 3px 0;
	}
	div.contact_mail dl dd{
		border:solid 0px #999;
		box-sizing:border-box;
		width:100%;
	}
	div.contact_mail dl dd input{
		width:100%;
		line-height:45px;
		height:45px;
		box-sizing:border-box;
	}
	div.contact_mail dl dd textarea{
		width:100% !important;
		box-sizing:border-box;
	}
	::placeholder{
		color: rgba(16,54,86,0.5);
		font-size: 12px;
	}
	div.btn05{
		margin-bottom: 2em;
	}
	div.btn05 input{
		display: block;
		width: 200px;
		margin: 0 auto;
		line-height: 50px;
		border-radius: 5px;
		color: #FFF;
		background-color: #103656;
		padding: 0 20px;
	}
	/*footer*/
	footer div.dataarea dl dt figure{
		margin: 0 auto;
	}
	footer div.dataarea{
		display:initial !important;
	}
	footer div.dataarea div.map{
		position: relative;
		z-index: 1;
		width: 100%;
		padding-top: 56.25%;
	}
	footer div.dataarea div.map iframe{
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}
	
}
@media screen and (max-width:320px){
	
	/*小さいサイズのスマートフォン用のスタイルをここに記載*/
	
}
@media screen and (min-width:768px) and (max-width:1099px){
	
	/*タブレット用のスタイルをここに記載*/
	/*header
	-----------------------------*/
	header + *{
		margin-top:-55px;
	}
	div.pcmenu{
		display:none;
	}
	/*メニュー*/
	div.sitemenu{
		padding:0 !important;
	}
	div.contact{
		padding:25px 20px 25px 20px;
		background-color:#fff;
		width:100%;
		box-sizing:border-box;
	}
	div.contact_area{
		padding:20px !important;
		box-sizing:border-box !important;
	}
	h3.contact_title{
		background-color:#103656;
		padding:5px 10px;
		border-radius:10px;
		display:table;
		margin:0 auto;
		color:#fff;
		font-size:18px;
	}
	div.cotact_tel{
	}
	div.cotact_tel dl{
		padding:20px 0;
	}
	div.cotact_tel dl dt{
		margin:0 0 5px 0;
	}
	div.cotact_tel dl dt div{
		margin-bottom: 1rem;
	}
	div.cotact_tel dl dt div a{
		pointer-events:none;
		font-size:28px;
		color:#103656;
		padding:0 0 0 45px;
		position:relative;
		z-index:1;
		display:table;
		margin:0 auto;
	}
	div.cotact_tel dl dt div a::before{
		content:"";
		position:absolute;
		left:0;
		top:0;
		background-size:40px;
		width:40px;
		height:40px;
		background-position:center;
		background-repeat:no-repeat;
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23103656" d="M23.026 21.241c-0.819-0.393-1.614-0.826-2.382-1.3-0.276-0.171-0.671-0.182-0.944-0.034-0.448 0.244-0.903 0.474-1.366 0.691-0.298 0.14-0.607 0.126-0.873-0.025-1.257-0.715-2.407-1.595-3.423-2.61s-1.895-2.166-2.61-3.423c-0.151-0.265-0.164-0.575-0.025-0.874 0.218-0.463 0.448-0.918 0.691-1.366 0.148-0.272 0.135-0.665-0.034-0.943-0.473-0.769-0.908-1.564-1.3-2.382-0.286-0.596-1.038-0.626-1.407-0.29-0.629 0.572-1.185 1.222-1.649 1.937 0.483 3.543 2.13 6.721 4.542 9.133s5.588 4.059 9.132 4.543c0.716-0.465 1.366-1.021 1.937-1.65 0.336-0.37 0.307-1.122-0.289-1.407zM16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16c8.837 0 16-7.164 16-16s-7.163-16-16-16zM16 30.667c-8.1 0-14.667-6.566-14.667-14.667s6.566-14.667 14.667-14.667c8.101 0 14.667 6.566 14.667 14.667s-6.564 14.667-14.667 14.667z" /></svg>');
	}
	div.cotact_tel dl dd{
		display:flex;
	}
	div.cotact_tel dl dd p{
		font-size:14px;
		width:calc(100% / 2 - 5px);
		text-align:center;
	}
	div.cotact_tel dl dd p span{
		padding:5px;
		margin:0 5px 0 0;
		border-radius:5px;
		color:#103656;
	}
	div.contact_mail{
		margin:10px 0 0 0;
	}
	div.contact_mail dl{
		margin:0 0 10px 0;
	}
	div.contact_mail dl dt{
		margin:0 0 3px 0;
	}
	div.contact_mail dl dd{
	}
	div.contact_mail dl dd input{
		width:100%;
		line-height:35px;
		border: none;
	}
	div.contact_mail dl dd textarea{
		width:100%;
		border: none;
	}
	::placeholder{
		color: rgba(16,54,86,0.5);
		font-size: 12px;
	}
	div.btn05{
		margin-bottom: 2em;
	}
	div.btn05 input{
		display: block;
		width: 200px;
		margin: 0 auto;
		line-height: 50px;
		border-radius: 5px;
		color: #FFF;
		background-color: #103656;
		padding: 0 20px;
	}
	/*回り込み解除*/
	.clearfix:after {
		content:"";
		display:block;
		clear:both;
	}
	.clearfix:before {
　　content:"";
		display:block;
		clear:both;
		}
	.clearfix {
		display:block;
	}
	
}
@media (orientation: landscape) and (max-width:568px){
	
	/*小さいサイズのスマートフォン用横向きのスタイルをここに記載*/
	
}
@media (orientation: landscape) and (min-width:569px) and (max-width:724px){
	
	/*大きいサイズのスマートフォン用横向きのスタイルをここに記載*/
	
}
@media (orientation: landscape) and (min-width:725px) and (max-width:1099px){
	
	/*タブレット用横向きのスタイルをここに記載*/
	
}
@media screen and (min-width:1100px){
	
	/*PC用のスタイルをここに記載*/
		/*header
	-----------------------------*/
	header + *{
		margin-top:-85px;
	}
	div.pageheader{
		margin:0;
	}
	header div.header{
		width:1100px;
		margin:0 auto;
	}
	div.header.menubtn::before{
		content:"";
		font-size:12px !important;
		font-weight:300;
		bottom:0;
		left:50%;
		line-height:12px;
		transform:translate(-50%,0);
	}
	div.catchcopy div.inner > *{
		color:#fff;
	}
	.ie header{
		position:relative;
	}
	.ie header.scroll{
		position:fixed;
	}
	div.headerlogo{
		left:0;
		transform: translate(0%,-50%);
	}
	header div.menubtn[pc="left"]{
		float:right;
	}
	.pcnone{
		display:none;
	}
	div.pcmenu{
		display:table;
		float:right;
    padding-right: 10px;
    box-sizing: border-box;
	}
	div.pcmenu > div{
		float:left;
		margin:0 3px;
		box-sizing:border-box;
		color:#000;
	}
	div.pcmenu > div a{
		color:#000;
		line-height:30px;
		padding:0 0.3em;
		transition: all 0.3s ease;
		display:block;
	}
	div.pcmenu > div.plus{
		position:relative;
		z-index:1;
	}
	div.pcmenu > div.plus span{
		width:15px;
		height:15px;
		position:absolute;
		top:50%;
		right:0px;
		transform:skewY(-50%);
		top:50%;
		right:0;
	}
	div.pcmenu > div.plus span::before{
		content:"";
		position:absolute;
		width:1em;
		height:2px;
		border-color:#0084e7;
	}
	div.pcmenu > div.plus span::after{
		position:absolute;
		transform:rotate(-45deg);
		width:1em;
		height:2px;
		border-color:#0084e7;
	}
	div.pcmenu > div a:hover{
		transform: translateY(-5px);
		  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
	}
	div.headerlogo{
		width:auto !important;
	}
	div.headerlogo img{
		width:auto;
	}
	/*メニュー*/
	div.contact{
		padding:25px 20px 25px 20px;
		background-color:#fff;
		width:100%;
		box-sizing:border-box;
	}
	div.contact_area{
		padding:20px;
		box-sizing:border-box;
	}
	h3.contact_title{
		background-color:#103656;
		padding:5px 10px;
		border-radius:10px;
		display:table;
		margin:0 auto;
		color:#fff;
		font-size:18px;
	}
	div.cotact_tel{
	}
	div.cotact_tel dl{
		padding:20px 0;
	}
	div.cotact_tel dl dt{
		margin:0 0 5px 0;
	}
	div.cotact_tel dl dt div{
		margin-bottom: 1em;
	}
	div.cotact_tel dl dt div a{
		pointer-events:none;
		font-size:28px;
		color:#103656;
		padding:0 0 0 45px;
		position:relative;
		z-index:1;
		display:table;
		margin:0 auto;
	}
	div.cotact_tel dl dt div a::before{
		content:"";
		position:absolute;
		left:0;
		top:0;
		background-size:40px;
		width:40px;
		height:40px;
		background-position:center;
		background-repeat:no-repeat;
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23103656" d="M23.026 21.241c-0.819-0.393-1.614-0.826-2.382-1.3-0.276-0.171-0.671-0.182-0.944-0.034-0.448 0.244-0.903 0.474-1.366 0.691-0.298 0.14-0.607 0.126-0.873-0.025-1.257-0.715-2.407-1.595-3.423-2.61s-1.895-2.166-2.61-3.423c-0.151-0.265-0.164-0.575-0.025-0.874 0.218-0.463 0.448-0.918 0.691-1.366 0.148-0.272 0.135-0.665-0.034-0.943-0.473-0.769-0.908-1.564-1.3-2.382-0.286-0.596-1.038-0.626-1.407-0.29-0.629 0.572-1.185 1.222-1.649 1.937 0.483 3.543 2.13 6.721 4.542 9.133s5.588 4.059 9.132 4.543c0.716-0.465 1.366-1.021 1.937-1.65 0.336-0.37 0.307-1.122-0.289-1.407zM16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16c8.837 0 16-7.164 16-16s-7.163-16-16-16zM16 30.667c-8.1 0-14.667-6.566-14.667-14.667s6.566-14.667 14.667-14.667c8.101 0 14.667 6.566 14.667 14.667s-6.564 14.667-14.667 14.667z" /></svg>');
	}
	div.cotact_tel dl dd{
		display:flex;
	}
	div.cotact_tel dl dd p{
		font-size:14px;
		width:calc(100% / 2 - 5px);
		text-align:center;
	}
	div.cotact_tel dl dd p span{
		padding:5px;
		margin:0 5px 0 0;
		border-radius:5px;
		color:#103656;
	}
	div.contact_mail{
		margin:10px 0 0 0;
	}
	div.contact_mail dl{
		margin:0 0 10px 0;
	}
	div.contact_mail dl dt{
		margin:0 0 3px 0;
	}
	div.contact_mail dl dd{
	}
	div.contact_mail dl dd input{
		width:100%;
		line-height:35px;
		color:#000;
	}
	div.contact_mail dl dd textarea{
		width:100%;
		color:#000;
	}
	::placeholder{
		color: rgba(16,54,86,0.5);
		font-size: 12px;
	}
	div.btn05{
		margin-bottom: 2em;
	}
	div.btn05 input{
		display: block;
		width: 200px;
		margin: 0 auto;
		line-height: 50px;
		border-radius: 5px;
		color: #FFF;
		background-color: #103656;
		padding: 0 20px;
	}
	/*footer*/
	footer div.dataarea{
		width: 100%;
	}
	footer div.dataarea div.map{
		display: table;
		margin-left: auto;
		margin-right: 0;
		position: relative;
		z-index: 1;
		width: 550px;
		padding-bottom: 200px;
		overflow: hidden;
	}
	footer div.dataarea div.map iframe{
		position: absolute;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
	}
	
}