@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;900&display=swap&subset=japanese);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css);

@media screen and (min-width: 769px) {
	html{ font-size:62.5%;}}
@media screen and (max-width: 768px) {
	html{ font-size:90%;}}
@media screen and (max-width: 500px) {
	html{ font-size:62.5%;}}

html{
	scroll-behavior: smooth;
}

body{
	position: relative;
	font-family: 'Kosugi Maru', sans-serif,'Noto Sans JP','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	line-height: 0;
	overflow-x: hidden;
	margin:0px;
	padding:0px;
	text-align: justify;
}

img {
  pointer-events: none;
}

#page_top{
  width: 40px;
  height: 40px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #e48381;
  z-index:500;
  border-radius:5px 0 0 0;
}

#page_top a{
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  top: 10px;
  bottom: 0;
  line-height:1;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}



.ho-gan_box {
  /* 方眼紙模様に必須のスタイル */
  height:100%;
  width:100%;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #fdfcfb calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #fdfcfb calc(100% - 1px));
  background-size: 20px 20px;
  background-repeat: repeat;
  background-position: center center;

  /* 以下任意のスタイル */
  padding:0.35px;
  margin:0px;
}


/* about リンクテーブル */

table th {
  display: block;
  width: 100%;
  padding-right:4rem;
}

.about {
	font-family: 'Josefin Sans', sans-serif;
	text-align:left;
	margin-top:1rem;
	margin-bottom:1.25rem;
	font-size:1.75rem;
}

.text-link{
	margin-top:1rem;
	line-height: 2.25rem;
}


@media screen and (max-width: 767px) {
table {
  display: block;
  width: 100%;
 
}
table tbody {
	text-align:left;
  display: block;
  width: 100%;
}

table tr {
  display: block;
  width: 100%;
}
table th {
  display: block;
  width: 100%;
  padding-right:4rem;
}


.about {
	font-size:1.55rem;
	margin-top:3rem;
}


}


.contact {
	display:block;
	padding:17px;
	text-align:center;
	border-radius:5rem;
}

a .contact { 
font-family: 'M PLUS Rounded 1c', sans-serif;
background-color:#f6f1f0;
font-weight:bold; 
}




a{
	color: #363433;
}


.box {
  scroll-margin-top: 9rem;
  margin-bottom: 50px;
}

.box h2{
	font-family: 'Josefin Sans', sans-serif;
	font-size: 5rem;
	padding-bottom: 0.85rem;
	border-bottom-style: solid;
}

.box h3{
	display: inline-block;
	vertical-align: bottom;
	font-weight: 600;
	border-bottom-style: solid;
}

.box strong{
	font-weight: 500;
}

.text-picomimi{
	font-family: 'Josefin Sans', sans-serif;
	font-size:1.5rem;
}

.text-sitelink{
	font-family: 'Josefin Sans', sans-serif;
}


.text-link{
	text-align:left;
}

.text a{
	text-decoration: underline;
	font-weight: 500;
}


#social a{
	font-family: 'Josefin Sans', sans-serif;
	display: inline-block;
	text-align: center;
	font-weight: 600;
}

#social a:last-child{
	margin-right: 0;
}

#social a i{
	display: block;
	border-radius:50%;
}

dt,li{
	position: relative;
	font-weight: 500;
}

dt {
	font-weight: 600;
}

dt::before,
li::before{
	position: absolute;
	left: -2rem;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
}




dt.like::before,
li.like::before{
	content: "\f004";
	color: #e86273;
}


dt.dislike::before,
li.dislike::before{
	content: "\f7a9";
	color: #8a6e83;
}

.link dt::before,
.link li::before{
	content: "\f35d";
	
}


.globalnav_bg {
  height: 70px;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  opacity: 1;
  background: #FFF;
  box-shadow: 0 3px 6px rgba(107, 98, 96, 0.05); 
}


a {
text-decoration: none;
}

ul {
list-style: none;
}

sup {
	font-size: 70%;
	vertical-align: top;
	position: relative;
	top: -0.1em; 
}



@media(min-width:769px){
    .menu-sm{
        display: none !important; /* PCのとき非表示 */
    }
}
@media(max-width:768px){
    .menu-pc{
        display: none !important; /* スマホのとき非表示 */
    }
}
 
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
	.menu-pad{
        display: none !important; /* ipadのとき非表示 */
    }
}



/* スマホメニュー */

.menu-checkbox {
display: none;
}

.drawer-menu {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 225px;
transform: translateX(100%);
transition: all 0.3s ease-in-out 0s;
background-color: #e48381;
  box-shadow: -3px 0 6px rgba(107, 98, 96, 0.07); 
z-index: 20;
}

.drawer-menu-list {
margin-top: 100px;
padding-right:1rem;
}

.drawer-menu-item-link {
display: block;
text-align: left;
font-size: 13px;
color: #fff;;
margin-top: 10px;
margin-left:2rem;
}

.drawer-menu-item-p {
font-family: 'Josefin Sans', sans-serif;
display: block;
text-align: left;
font-size: 17px;
color: #fff;;
margin-top: 2.5rem;
margin-left:2rem;
}

.menu-checkbox:checked ~ .drawer-menu {
transform: translateX(0);
}

.drawer-icon {
cursor: pointer;
position: fixed;
top: 30px;
right: 50px;
justify-content: center;
align-items: center;
z-index: 30;
background-color: #fff;
}

.drawer-icon span,
.drawer-icon span:before,
.drawer-icon span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 5px;
background-color: #222222;
position: absolute;
transition: all 0.3s ease-in-out 0s;
}

.drawer-icon span::before {
bottom: 8px;
}

.drawer-icon span::after {
top: 8px;
}

.menu-checkbox:checked ~ .drawer-icon {
background-color: #866e6b;
}

.menu-checkbox:checked ~ .drawer-icon span {
background-color: rgba(255, 255, 255, 0);
}

.menu-checkbox:checked ~ .drawer-icon span::before {
bottom: 0;
transform: rotate(-45deg);
background-color: #fff;
}

.menu-checkbox:checked ~ .drawer-icon span::after {
top: 0;
transform: rotate(45deg);
background-color: #fff;
}

.menu-background {
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: all 0.3s ease-in-out 0s;
}

.menu-checkbox:checked ~ .menu-background {
display: block;
opacity: 0.3;
}




/* ↓イラスト */

#illustlog{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

#illustlog::before,
#illustlog::after{
	content: "";
	display: block;
	height: 0;
}

#illustlog::before{
	order: 1;
}

#illustlog .illust > a{
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}

#illustlog .illust > a::before{
	content: "";
	display: block;
	padding-top: 100%;
}

#illustlog .illust > a > img{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 50%;
}



/* ↓オフライン */

.book:last-child{
	margin-bottom: 0;
}

.book .hyoushi img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.book h4{
	font-weight: 500;
}

.book p.product{
	font-weight: 500;
}

.order{
	width: 100%;
	display: flex;
	align-content: space-between;
}

.book .order a{
	display: block;
	width: 100%;
	text-align: center;
	font-weight: bold;
}

.book .order a.soldout{
	pointer-events: none;
	background-color: #ECECEC;
	color: #aaa;
}



/* ↓返信 */

.res q{
	font-weight: 600;
}

.res q::before{
	font-family: "Font Awesome 5 Free";
	content: "\f0e0";
	font-weight: bold;
}



/* ↓折り畳み */

summary{
	display: block;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	font-family: 'Josefin Sans', sans-serif;
}


summary::-webkit-details-marker {
	display: none;
}

details[open] > * {
	animation: fadeIn 0.5s ease;
}

details[open] > summary {
	display: none;
}

@keyframes fadeIn {
	0% {
		opacity: 0; /* 透明 */
		transform: translateY(-10px); /* 上から表示 */
	}
	100% {
		opacity: 1;
		transform: none;
	}
}







#footerWrap{
	width:100%;
	height:40px;
	z-index:500;
}

#footer{
	width:100%; /* フッター幅を指定*/
	line-height: 40px;
	text-align: center;
	margin:0 auto;
	color:#fff;
	background-color: #e48381;
	font-size:0.75rem;
	font-family:'Noto Sans JP';
}

.footer-logo a{
font-family: 'Josefin Sans', sans-serif;
font-size:1.25rem;
margin-right:0.35rem;
color:#fff;
}




/* ↓float解除 */
.book::after {
	content: "";
	display: table;
	clear: both;
}


p.kaigyo_summary {
    margin-top: 4.5rem;
}

p.kaigyo {
    margin-top: 8.5em;
}

p.kaigyo_link {
    margin-top: 2.5em;
}

p.kaigyo_contact {
    margin-top: 1.5em;
}