@charset "utf-8";

/* base
------------------ */
/* reset */
html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,q,pre,table,caption,colgroup,col,tbody,thead,tfoot,tr,th,td,ul,ol,li,dl,dt,dd,form,fieldset,legend,label,span,a,img,em,ins,del,cite,abbr,sup,sub,dfn,code,var,samp,kbd,object,script,noscript,style,iframe,embed,param,map,area,menu,hr,address,small,strong,i,b,article,aside,figure,footer,header,hgroup,nav,section,figcaption,time,video,audio,mark,ruby,rt,rp,bdo,source,canvas,details,summary,command,datalist,keygen,output,progress,meter{margin:0;padding:0;outline:0;}
address,article,aside,figure,figcaption,footer,header,hgroup,hr,legend,menu,nav,section,summary{display:block;}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight: 200;}

/* body */
body{
	color:#333;
	line-height:1.7;
	font-size:100%;/*16px*/
	/*font-family:"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Gothic", sans-serif;*/
  	font-family: 'Noto Serif JP', 'Times New Roman', 'Yu Mincho', 'MS PMincho', serif;
	font-weight: 300;
	word-break:break-all;
	background: #131313;
	color: #fff;
}

@media screen and (orientation:landscape){
body{
	-webkit-text-size-adjust:100%;
}
}

/* リンク */
a:link{color:#0070ad;text-decoration:underline;}
a:visited{color:#865d86;text-decoration:underline;}
a:hover{color:#288ec6;text-decoration:none;}

/* タグ共通 */
img{border:none;max-width:100%; vertical-align: bottom;}
p{margin:0 0 1.5rem 0;}
hr{border:none;border-top:1px solid #ccc;margin:3rem auto;clear:both;}
table{empty-cells:show;border:none;border-collapse:collapse;max-width:100%;}

/*テキスト関係*/
.smaller{font-size:75%;}/*12px*/
.larger{font-size:125%;}/*20px*/
.bold{font-weight:bold;}
.normal{font-weight:normal;}
.red{color:#E40011;}
.gray{color:#666;}
.highlight{background:-webkit-gradient(linear, left top, left bottom, from(#ffec95), to(#ffec95));background:linear-gradient(transparent 55%, #ffec95 55%);}

/*リスト*/
li{list-style:none;}
ul.list_mark{margin-bottom:1.5rem;}
ul.list_mark li{list-style:disc;margin-left:1.5em;}
ol.list_mark{margin-bottom:1.5rem;}
ol.list_mark li{list-style:decimal;margin-left:1.5rem;}
dl.dl_default{margin-bottom:1.5rem;}
dl.dl_default dt{font-weight:bold;}
dl.dl_default dd{margin-left:1em;}

/* テキスト揃え */
.ac{text-align:center;}
.al{text-align:left;}
.ar{text-align:right;}
.vam{vertical-align:middle;}
.vat{vertical-align:top;}

/* フロート */
.fl{float:left;}
.fr{float:right;}
.cl{clear:both;}

/* マージン */
.ma{margin-right:auto;margin-left:auto;}
.ml{margin-left:1rem;}
.mr{margin-right:1rem;}
.mb{margin-bottom:1rem;}
.mb0{margin-bottom:0;}

/* top padding */
.pt-s  { padding-top: 2rem; }
.pt-m  { padding-top: 2.5rem; }
.pt-l  { padding-top: 5rem; }
.pt-xl { padding-top: 6rem; }


/* デフォルトのpadding設定 */

/* bottom padding */
.pb-s { padding-bottom: 2rem; }  /* 32px → 2rem */
.pb-m { padding-bottom: 2.5rem; } /* 40px → 2.5rem */
.pb-l { padding-bottom: 5rem; }   /* 80px → 5rem */
.pb-xl { padding-bottom: 6rem; }  /* 96px → 6rem */

/* top + bottom padding */
.ptb-s { padding-top: 2rem; padding-bottom: 2rem; }  /* 32px → 2rem */
.ptb-m { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* 40px → 2.5rem */
.ptb-l { padding-top: 5rem; padding-bottom: 5rem; }   /* 80px → 5rem */
.ptb-xl { padding-top: 6rem; padding-bottom: 6rem; }  /* 96px → 6rem */

/* margin-bottom only */
.mb-s { margin-bottom: 2rem; }  /* 32px → 2rem */
.mb-m { margin-bottom: 2.5rem; } /* 40px → 2.5rem */
.mb-l { margin-bottom: 5rem; }   /* 80px → 5rem */
.mb-xl { margin-bottom: 6rem; }  /* 96px → 6rem */


/* margin-top only */
.mt-s { margin-top: 2rem; }  /* 32px → 2rem */
.mt-m { margin-top: 2.5rem; } /* 40px → 2.5rem */
.mt-l { margin-top: 5rem; }   /* 80px → 5rem */
.mt-xl { margin-top: 6rem; }  /* 96px → 6rem */

/* レスポンシブデザイン調整 */

/* 500px未満（スマホ） */
@media (max-width: 499px) {
	 .pt-s  { padding-top: 2rem; }
  .pt-m  { padding-top: 2.5rem; }
  .pt-l  { padding-top: 3.5rem; }
  .pt-xl { padding-top: 4rem; }
  .pb-s { padding-bottom: 2rem; }  /* 32px → 2rem */
  .pb-m { padding-bottom: 2.5rem; } /* 40px → 2.5rem */
  .pb-l { padding-bottom: 3.5rem; } /* 56px → 3.5rem */
  .pb-xl { padding-bottom: 4rem; }  /* 64px → 4rem */
  .ptb-s { padding-top: 2rem; padding-bottom: 2rem; }  /* 32px → 2rem */
  .ptb-m { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* 40px → 2.5rem */
  .ptb-l { padding-top: 3.5rem; padding-bottom: 3.5rem; } /* 56px → 3.5rem */
  .ptb-xl { padding-top: 4rem; padding-bottom: 4rem; }  /* 64px → 4rem */
  .mb-s { margin-bottom: 2rem; }  /* 32px → 2rem */
  .mb-m { margin-bottom: 2.5rem; } /* 40px → 2.5rem */
  .mb-l { margin-bottom: 3.5rem; } /* 56px → 3.5rem */
  .mb-xl { margin-bottom: 4rem; }  /* 64px → 4rem */
.mt-s { margin-top: 2rem; }  /* 32px → 2rem */
  .mt-m { margin-top: 2.5rem; } /* 40px → 2.5rem */
  .mt-l { margin-top: 3.5rem; } /* 56px → 3.5rem */
  .mt-xl { margin-top: 4rem; }  /* 64px → 4rem */
}

/* 500px〜719px（タブレット） */
@media (min-width: 500px) and (max-width: 719px) {
  .pb-s { padding-bottom: 2rem; }  /* 32px → 2rem */
  .pb-m { padding-bottom: 2.5rem; } /* 40px → 2.5rem */
  .pb-l { padding-bottom: 4rem; }   /* 64px → 4rem */
  .pb-xl { padding-bottom: 4.5rem; }  /* 72px → 4.5rem */
  .ptb-s { padding-top: 2rem; padding-bottom: 2rem; }  /* 32px → 2rem */
  .ptb-m { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* 40px → 2.5rem */
  .ptb-l { padding-top: 4rem; padding-bottom: 4rem; }   /* 64px → 4rem */
  .ptb-xl { padding-top: 4.5rem; padding-bottom: 4.5rem; }  /* 72px → 4.5rem */
  .mb-s { margin-bottom: 2rem; }  /* 32px → 2rem */
  .mb-m { margin-bottom: 2.5rem; } /* 40px → 2.5rem */
  .mb-l { margin-bottom: 4rem; }   /* 64px → 4rem */
  .mb-xl { margin-bottom: 4.5rem; }  /* 72px → 4.5rem */
.mt-s { margin-bottom: 2rem; }  /* 32px → 2rem */
  .mt-m { margin-top: 2.5rem; } /* 40px → 2.5rem */
  .mt-l { margin-top: 4rem; }   /* 64px → 4rem */
  .mt-xl { margin-top: 4.5rem; }  /* 72px → 4.5rem */
}

/* 720px〜979px（タブレット / 小型デスクトップ） */
@media (min-width: 720px) and (max-width: 979px) {
	  .pt-s  { padding-top: 2rem; }
  .pt-m  { padding-top: 2.5rem; }
  .pt-l  { padding-top: 4rem; }
  .pt-xl { padding-top: 4.5rem; }
  .pb-s { padding-bottom: 2.5rem; }  /* 40px → 2.5rem */
  .pb-m { padding-bottom: 3.5rem; } /* 56px → 3.5rem */
  .pb-l { padding-bottom: 4.5rem; }   /* 72px → 4.5rem */
  .pb-xl { padding-bottom: 5rem; } /* 80px → 5rem */
  .ptb-s { padding-top: 2.5rem; padding-bottom: 2.5rem; }  /* 40px → 2.5rem */
  .ptb-m { padding-top: 3.5rem; padding-bottom: 3.5rem; } /* 56px → 3.5rem */
  .ptb-l { padding-top: 4.5rem; padding-bottom: 4.5rem; }   /* 72px → 4.5rem */
  .ptb-xl { padding-top: 5rem; padding-bottom: 5rem; } /* 80px → 5rem */
  .mb-s { margin-bottom: 2.5rem; }  /* 40px → 2.5rem */
  .mb-m { margin-bottom: 3.5rem; } /* 56px → 3.5rem */
  .mb-l { margin-bottom: 4.5rem; }   /* 72px → 4.5rem */
  .mb-xl { margin-bottom: 5rem; } /* 80px → 5rem */
	  .mt-s { margin-top: 2.5rem; }  /* 40px → 2.5rem */
  .mt-m { margin-top: 3.5rem; } /* 56px → 3.5rem */
  .mt-l { margin-top: 4.5rem; }   /* 72px → 4.5rem */
  .mt-xl { margin-top: 5rem; } /* 80px → 5rem */
}

/* 980px以上（デスクトップ） */
@media (min-width: 980px) {
  .pt-s  { padding-top: 4rem; }
  .pt-m  { padding-top: 5rem; }
  .pt-l  { padding-top: 6rem; }
  .pt-xl { padding-top: 6.5rem; }
  .pb-s { padding-bottom: 4rem; }  /* 64px → 4rem */
  .pb-m { padding-bottom: 5rem; } /* 80px → 5rem */
  .pb-l { padding-bottom: 6rem; }   /* 96px → 6rem */
  .pb-xl { padding-bottom: 6.5rem; } /* 104px → 6.5rem */
  .ptb-s { padding-top: 4rem; padding-bottom: 4rem; }  /* 64px → 4rem */
  .ptb-m { padding-top: 5rem; padding-bottom: 5rem; } /* 80px → 5rem */
  .ptb-l { padding-top: 6rem; padding-bottom: 6rem; }   /* 96px → 6rem */
  .ptb-xl { padding-top: 6.5rem; padding-bottom: 6.5rem; } /* 104px → 6.5rem */
  .mb-s { margin-bottom: 4rem; }  /* 64px → 4rem */
  .mb-m { margin-bottom: 5rem; } /* 80px → 5rem */
  .mb-l { margin-bottom: 6rem; }   /* 96px → 6rem */
  .mb-xl { margin-bottom: 6.5rem; } /* 104px → 6.5rem */
	  .mt-s { margin-top: 4rem; }  /* 64px → 4rem */
  .mt-m { margin-top: 5rem; } /* 80px → 5rem */
  .mt-l { margin-top: 6rem; }   /* 96px → 6rem */
  .mt-xl { margin-top: 6.5rem; } /* 104px → 6.5rem */
}

/* デフォルトの設定（remベース） */
.ptb { padding-top: 1.5rem; padding-bottom: 1.5rem; }



/* エフェクト */
.fade:hover{opacity:0.8;transition:0.2s;}

/* アコーディオン */
.trg{
	cursor:pointer;
}

.flex{
	display: flex;
	flex-wrap: wrap;
}

/* header
------------------ */
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.0;
    position: fixed;
    color: #fff;
    z-index: 999;
    width: 100%;
	padding:0.25rem 5%;
	box-sizing: border-box;
}

#header .flex{
	/*column-gap: 2rem;*/
}

/* ロゴ */
#logo,.sp_logo{
	width: 12rem
}

/* スマホメニューボタン */
#sp_nav_trg{
	width: 3rem;
	padding: 0.75rem 0;
	text-align: center;
	font-size: 175%;
	/*background: #333333;*/
}

@media print, screen and (min-width: 980px){
	
#header{
		padding:0.5rem 5%;
}
#logo,.sp_logo{
	width: 17rem
}	

#sp_nav_trg{
	display: none;
}
}

/* pc nav
------------------ */
#pc_nav{
	display: none;
}

@media print, screen and (min-width: 980px){
#pc_nav{
	display: block;
	text-align: center;
}

/*#pc_nav li{
	display: inline-block;
}*/

#pc_nav a{
	display: block;
	padding: 1rem 1.5rem;
	text-decoration: none;
	color: #fff;
	transition: 0.2s;
}

#pc_nav a:hover{
	background: #333;
}
}

/* sp nav
------------------ */
#sp_nav{
	display: none;
	width: 100%;
}

.sp_logo_wrap {
	padding: 0.5rem 5%;
	align-items: center;
	justify-content: space-between;
}

/* スマホメニュー閉じるボタン */
#sp_nav_close_top{
	/* float: right; */
	font-size: 180%;
	padding: 1rem 0.5rem;
	/* margin-right: 5%; */
	flex: 1;
	text-align: right;
}
#sp_nav_close_bottom{
	max-width: 60%;
	margin: 0 auto;
	text-align: center;
	border-radius: 3px;
	/*background: #737373;*/
	padding: 1rem 0;
}

/* スマホメニュー */
#sp_nav ul{
	clear: both;
	border-top: 1px solid #fff;
	margin-bottom: 1rem;
}

#sp_nav li{
	font-size: 0.875rem;
	border-bottom: 1px solid #000;
}

#sp_nav li a{
	display: block;
	padding: 1rem;
	color: #fff;
	text-decoration: none;
}

/* footer
------------------ */
#footer{
	background: #000000;
}

#footer > .flex {
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	gap:1rem;
}

#footer .store_info dt{
	width: 100%;
	margin-top: 1rem;
}

#footer .store_info a{
	color: #fff;
	text-decoration: underline;
}

#footer .store_info .note{
	font-size: 0.875rem;
	color: #bbb;
}

.footer_ph{
	margin-right: -1rem;
	margin-top: 1rem;
	column-gap: 1rem;
	row-gap: 1rem;
}

.footer_ph figure{
	width: calc(50% - 1rem);
}

.f_logo_wrap{flex-direction: column;}

/* フッターリンク */
#footer_link li{
	border-bottom: 1px solid #000;
}

#footer_link li a{
	display: block;
	padding: 1rem;
}

.f_logo_wrap{
	align-items: center;
	column-gap:2rem;
	row-gap:1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

#f_logo{
	width:8rem;
	justify-content: center;
	gap:0.5rem;
	font-size: 0.875rem;
}

#f_logo p > img{
	position: relative;
	right: -5px;
}
#f_logo p{
	margin-bottom: 0.5rem;
}

.sns_wrap .flex{
	justify-content: center;
	gap:1rem;
}

.sns_wrap li{
	width: 2rem;
}

@media print, screen and (min-width: 640px){
	#footer > .flex{
		flex-direction: row;
	}
	.f_logo_wrap{flex-direction: row; width: 100%;}
	
	.store_info{flex: 1;}
	
	.sns_wrap{ margin-top: 1rem; flex: 1;}
	
	.footer_ph figure{
		width: calc(25% - 1rem);
	}
}


@media print, screen and (min-width: 980px){
	#footer_link{
		text-align: center;
	}
	
	#footer_link li{
		border-bottom: none;
		display: inline-block;
	}
}

/* copyright */
#cpr{
	background: #bcdeff;
	text-align: center;
	padding: 0.5rem 0;
	font-size: 75%;
}

/* main
------------------ */
/* レイアウト */
#main{
	/*margin: 1rem 0 0 0;*/
}

.section{
	/*margin: 0 1rem 4rem 1rem;*/
	overflow: hidden;
}

.section.mb0{
	margin-bottom: 0;
}

@media print, screen and (min-width: 980px){
.section{
	/*margin: 0 auto 4rem auto;*/
	margin-left: auto;
	margin-right: auto;
	max-width: 1080px;
}
}

@media print, screen and (min-width: 1380px){
	.section.wide{
		max-width: 1280px;
	}
}

/* パンくずリスト */
#path{
	font-size: 75%;
	background: #efefef;
	padding: 0.5rem;
}

/* メインビジュアル */
#mv{
	/*background: #f00;*/
	text-align: center;
	font-size: 150%;
}

/* 見出し */
.h01{
	font-size: 175%;
}

.h02{
	color: #fff;
	font-size: 150%;
	line-height: 1.5;
}

.h03{
	font-size: 125%;
}

/* ボタン */
a.button{
	display: inline-block;
	border-radius: 5px;
	text-align: center;
	background: #abcdef;
	transition: 0.2s;
	text-decoration: none;
	color: #fff;
	padding: 0.8rem 3rem;
	letter-spacing: 2px;
}

a.button:hover{
	background: #bcdeff;
}
a.button.red{
	background: none;
	border:1px solid red;
	transition: 0.2s;
	text-decoration: none;
	color: #fff;
	padding: 0.8rem 3rem;
}

a.button.red:hover{
	background: none;
}



input.button{
	display: inline-block;
	border-radius: 5px;
	border: none;
	text-align: center;
	background: #abcdef;
	transition: 0.2s;
	text-decoration: none;
	color: #fff;
	padding: 0.8rem 3rem;
}

input.button_submit{
	font-size: 125%;
	background: #f90;
}

input.button_cancel{
	font-size: 87.5%;
	background: #ccc;
}

/* table */
.ta{
	width: 100%;
	margin-bottom: 2rem;
}

.ta th{
	border: 1px solid #ccc;
	background: #efefef;
	text-align: left;
	padding: 0.5rem;
	width: 30%;
}

.ta td{
	padding: 0.5rem;
	border: 1px solid #ccc;
}

/* フォーム */
input,textarea,select{
	font-family:Meiryo, sans-serif;
	font-size: 100%;
}

input[type=button],input[type=submit],input[type=cancel],textarea{
	-webkit-appearance:none;
}

input[type=button],input[type=submit],input[type=cancel],input[type=file], select,label{
	cursor: pointer;
}

input::placeholder{ /*入力欄に最初から入っている字*/
	color: #ccc;
	font-size: 87.5%;
}

.textbox{ /*文字入力欄*/
	border: 1px solid #999;
	padding: 3px;
	margin: 1px;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.1) inset;
}

.required{ /*「必須」の文字*/
	color: #f00;
	font-weight: normal;
	font-size: 75%;
}

.note{ /*入力欄の上の注意書き*/
	color: #999;
	font-size: 87.5%;
}

/* 送信ボタンエリア */
.submit_area{
	text-align: center;
	margin: 2rem 0;
}

.submit_area .button{
	display: block;
	margin: 0 auto 3rem auto;
}

/* エラー表示 */
div.error{
	color: #f00;
	font-weight: bold;
}

td.error{
	background: #ffd;
}


/* ---------------------
※メディアクエリの例（あとで消して下さい）
------------------------*/
@media print, screen and (min-width: 980px){} /* 画面が980px以上の場合（＆ 印刷の場合）*/
@media screen and (max-width: 480px){} /* 画面が480px以下の場合 */
@media screen and (min-width: 480px) and (max-width: 980px){} /* 画面が480～980pxの場合 */
@media screen and (orientation:landscape){} /* 画面の横が縦より長い場合（スマホ横向きの代用として使える）*/
@media screen and (orientation:portrait){} /* 画面の縦が横より長い場合 */

/*eof*/