@charset "utf-8";

/* 全体のスタイル調整 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-padding-top: 80px;
}

/* bodyの初期スタイル調整 */
body {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  color: #333;
  background-color: #fff;
}

.container	{
	width: 90%;
	margin: 80px auto;
	text-align: center;
}

/* 初期スタイル調整 */
h1	{
	font-family: 'Capriola', sans-serif;
	font-weight: normal;
}

h2	{
	font-family: 'Tilt Prism', cursive;
	font-weight: normal;
  font-size: 2.4em;
	margin: 1em 1em 0 1em;
}

h3 {
  font-family: 'Noto Serif JP', serif;
  font-weight: normal;
  font-size: 1.6em;
  margin: 1em;
  border: solid 3px #333;/*囲う線の色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

h4 {
	margin-top: 1.5em;
	padding: 0 0.5em;
	text-align: left;
  font-size: 1.2em;
  background: #e6e6e6;/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
  border-radius: 0.5em;/*角丸*/
}

h5	{
	margin-top: 1.2em;
	padding: 0;
	text-align: left;
  font-size: 1.6em;
}

h5:first-letter	{
	font-size: 1.6em;
}

h6 {
  margin-top: 0.8em;
  padding: 0;
  text-align: left;
  font-size: 1.4em;
}

p {
  margin-top: 1.6em;
  padding: 0;
  text-align: justify;
}

a {
  color: #333;
  text-decoration: none;
}

p a	{
	border-bottom: solid 1px #333;
}

ul {
  list-style: none;
}

img {
  width: 100%;
  height: auto;
}

nav	{
	font-family: 'Snippet', sans-serif;
}

section {
  margin: 0.6em 0 ;
  padding: 1em 0;
}


/* 共通スタイル調整 */

/*レイアウト関連*/
.sp-only {
  display: block;
}

.pc-only {
  display: none;
}

@media screen and (min-width:768px) {
  html {
  scroll-padding-top: 120px;
}

  .sp-only {
    display: none;
  }

  .pc-only {
    display: block;
  }
  
  .container {
	width: 70%;
	margin: 120px auto;
  }
}


/*--------------------
header
--------------------*/
.header {
  position: fixed;
  top: 0px;
  width: 100%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 200;
}

.header-logo-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


/*ハンバーガーメニュー*/
.gnav-toggle {
  position: relative;
  margin-top: 12px;
}

/*チェックボックス等は非表示に*/
.gnav-hidden {
  display: none;
}

/*アイコンのスペース*/
#gnav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#gnav-open span,
#gnav-open span::before,
#gnav-open span::after {
  content: '';
  position: absolute;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  display: block;
  cursor: pointer;
}

#gnav-open span::before {
  bottom: -8px;
}

#gnav-open span::after {
  bottom: -16px;
}

/*閉じる用の薄色箇所*/
#gnav-close {
  display: none;
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fcd41b;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

/*チェックがついたら表示させる*/
#gnav-input:checked ~ #gnav-close {
  display: block;
  opacity: 0.9;
}

#gnav-input:checked ~ #gnav-content {
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}

/*メニューの中身*/
#gnav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 70%;
  max-width: 300px;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  transition: 0.3s ease-in-out;
  transform: translateX(-105%);
}

.gnav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gnav-item {
  border-bottom: 1px solid #333;
  line-height: 2.4em;
  margin: 16px;
  padding-bottom: 8px;
}

.gnav-item a {
  color: #333;
  font-size: 16px;
  font-weight: bold;
  display: block;
  width: 200px;
  text-align: center;
}

.gnav-item-inner a	{
  color: #333;
	margin: 8px;
	padding-bottom: 4px;
}


/* PC */
@media screen and (min-width:768px) {
  .gnav-menu {
    flex-direction: row;
    padding-top: 16px;
    margin: 0;
  }

  .gnav-item {
    border-bottom: none;
    margin: 0;
    padding-bottom: 0;
    position: relative;
  }

  .gnav-item a {
    display: block;
    padding: 1em;
    color: #333;
    font-size: 16px;
    font-weight: normal;
  }

  .gnav-item a:hover {
    background: #fcd41b;
    border-radius: 1.6em;
  }

.gnav-item-inner a	{
	font-size: 14px;
	color: #333;
	background: #fff;
  border: solid 0.1em #333;
  border-radius: 1.6em;
  }
  
  ul.gnav-item-inner	{
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
  }
  
  ul.gnav-item-inner li	{
	width: 100%;
  }
  
  li.gnav-item:hover>ul.gnav-item-inner	{
	display: block;
  }
  
  table	{
	white-space: nowrap;
}

}


/*--------------------
footer
--------------------*/
footer	{
	text-align: center;
}


/*--------------------
Topへ
--------------------*/
#page_top{
width: 40px;
height: 40px;
position: fixed;
right: 10px;
bottom: 10px;
background: #d7157e;
opacity: 0.9;
border-radius: 50%;
}
#page_top a{
position: relative;
display: block;
width: 40px;
height: 40px;
text-decoration: none;
}

#page_top a::after{
content: '▲';
font-size: 14px;
font-weight: bold;
color: #fff;
position: absolute;
top: 10px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}


/*--------------------
パンくずリスト
--------------------*/
.breadcrumb {
  font-family: 'Snippet', sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 8px;
  list-style: none;
  text-align: left;
  border-top: dashed #333 1px;

}

.breadcrumb li {
  display: inline;
  list-style: none;
}

.breadcrumb li:after {
  content: '>';
  padding: 0 0.2em;
  color: #333;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #333;
  padding: 8px;
}

.breadcrumb li a:hover {
  background: #fcd41b;
  border-radius: 0.6em;
}


/*--------------------
local nav
--------------------*/
.local-nav	{
	font-size: 14px;
	line-height: 2.4em;
	margin: 0;
	padding: 0;
}

.local-nav li a	{
	padding: 8px;
}

.local-nav a:hover	{
	background: #fcd41b;
  border-radius: 0.5em;
}


/*--------------------
index
--------------------*/
/* 縦書き */
#top-text	{
	font-family: 'Noto Serif JP', serif;
	font-size: 51px;
	letter-spacing: 4px;
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline;
	transform: translate(-50%, -50%);
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

/* 文字の回転 */
.loading span {
  position: relative;
  display: inline-block;
  margin: 0 -.05em;
  color: #000000;
}
.loading span::after {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-text);
  color: #ffffff;
  opacity: 0;
  transform: rotateX(180deg);
  animation: loading 6s infinite;
}
.loading span:nth-child(2)::after {
  animation-delay: .4s;
}
.loading span:nth-child(3)::after {
  animation-delay: .8s;
}
.loading span:nth-child(4)::after {
  animation-delay: 1.2s;
}
@keyframes loading {
  0%, 75%, 100% {
    transform: rotateX(180deg);
    opacity: 0;
  }
  25%, 50% {
    transform: rotateX(0);
    opacity: 1;
  }
}

/* footer */
.index	{
	text-align: center;
	width: 100%;
	position: fixed;
	bottom: 0;
}


/*--------------------
ShoppingGuide
--------------------*/
/* table */
table	{
	margin-top: 0.8em;
	border-spacing: 0;
	border-collapse: collapse;
	width: auto;
}

table,th,td	{
	border: 1px solid #ccc;
	padding: 0.5em;
}

table th	{
	white-space: nowrap;
}

table caption	{
  margin-top: 0.8em;
	color: #666;
	text-align: left;
	white-space: nowrap;
}

/* h3以下のナビゲーション */
ul.guide-inner	{
	margin: 0;
	padding: 0;
	line-height: 2;
}

ul.guide-inner a	{
	padding: 8px;
}

ul.guide-inner a:hover,
ul.guide-inner a:focus	{
	background: #fcd41d;
  border-radius: 0.5em;
}

/* 都道府県 */
.todoufuken	{
	display: inline-block;
	padding: 8px;
}

table.souryou th	{
	white-space: nowrap;
}

table.souryou td	{
	text-align: left;
}

td.nowrap	{
	white-space: nowrap;
}

table li	{
	display:inline-block;
	padding-right: 1.25em;
}

.souryou li::before	{
	content: '・';
}

/* button ↓出荷について */
.btn-hassou	{
	display:block;
	padding: 8px;
	border-radius: 50px;
	margin: 1em auto;
	border: none;
	background: #fcd41b;
}

/* 配達希望時間帯 */
.time	{
	text-align: left;
}

.time li	{
	display: inline-block;
	padding: 0.5em;
}

.time li::before	{
	font-family: Material Icons;
	content: 'navigate_next';
}

/* 返品・交換について 重要事項 */
dl	{
	text-align: left;
}
dt	{
	margin-top: 2em;
}
dd	{
	margin-top: 0.5em;
}
dl dt::before	{
	font-family: Material Icons;
	content: 'check_box_outline_blank';
	margin-right: 0.25em;
	vertical-align: middle;
}

/* help */
.help-bc	{
	padding: 1em;
}
.help dt,.help dd {
	position: relative;
	padding: 0.5em;
}
.help dt {
	margin: 1em 1em 1em 0;
	background: #eee8aa;
	border-radius: 15px;
}
.help dd {
	margin: 0 1em 4em 0;
	background: #edf1ee;
	border-radius: 15px;
}
/* 吹き出し?? */
.help dt::before,.help dd::before{
	position: absolute;
	z-index: 99;
	top: 0.5em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
}
/* 質問吹き出し?? */
.help dt::before {
	right: -0.6em;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent #eee8aa;
}
/* 答え吹き出し?? */
.help dd::before {
	left: -0.4em;
	border-width: 5px 8.7px 5px 0;
	border-color: transparent #edf1ee transparent transparent;
}
/* アイコン */
.help dd::after {
	font-size: 1.2em;
	text-align: center;
	position: absolute;
	top: 0;
	color: #333;
	border-radius: 50%;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.2em;
}
/* 答えアイコン */
.help dd::after {
	left: -2.5em;
	margin: 0 0.5em 0 0;
	padding: 0.4em;
	font-family: Material Icons;
	content: 'support_agent';
	font-size: 1.6em;
	background: #edf1ee;
}

/*--------------------
Size guide
--------------------*/
/* 計測方法 */
td.left	{
	text-align: left;
}