@charset "utf-8";

@import url(/'https://fonts.googleapis.com/css?family=Anton');

/*全体の設定*/
/*---------------------------------------------------------------------------*/
html{ scroll-behavior: smooth; }

body {
	margin: 0px auto;
	padding: 0px;
	width:100%;
	background:white;
	//background: linear-gradient(180deg, hsla(0,100%,100%,1) 0px, var(--color00) 300px) ;
	min-width:480px;

/* 背景チェック用 */
//	background: red !important; 
}

body, div {
	color: var(--color05);	/*全体の文字色*/
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "小塚明朝 Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
//	font-family:'Source Han Serif', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "小塚明朝 Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
//	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
//	font-family:"HG丸ｺﾞｼｯｸM-PRO" , "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%; /* Safari */

	font-size: 18px;	/*文字サイズ*/
	line-height: 2em;		/*行間*/
}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form { margin: 0px; padding: 0px; font-size: 100%;}
ul { list-style-type: none;}
ol { padding-left: 40px; padding-bottom: 15px;}
img { border:none;max-width: 100%; height: auto; vertical-align: middle; }
table { border-collapse:collapse; font-size: 100%;border-spacing: 0; }
table td{ font-size:14px !important; }
iframe { width: 100%; }
center { margin:0 !important; padding:0 !important;}

h1#seo, h2#seo, h3#seo {
    display: none !important;
}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #aaa;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: var(--color05);	/*リンクテキストの色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

#main a {
	color: var(--color06);	/*リンクテキストの色*/
}

#main.blog a, #main.news a {
	color: var(--color05);	/*リンクテキストの色*/
}

a:hover {
	color: var(--color07);			/*マウスオン時の文字色*/
}

/*container（サイトを囲む一番外側のボックス）
---------------------------------------------------------------------------*/
#container {
	/*サイトの最大幅*/
	margin: 0 auto;
	padding: 0;
//	padding: 0 3%;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
#extra-head {
	width:100%;
	clear: both;
	overflow: visible;
	display:block;
	position:fixed;

	z-index:200;

//	background: darkgreen; 
	background: rgba(255,255,255,0.95);

	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
}

#head-in{
	width:100%;
	max-width:1200px;
	margin:0 auto;

	display:block;
	position:relative;

//	background:green;
}

#headspace{
	display:block;
//	background:gold;
}

#extra-head, #head-in, #headspace{ height:100px; }

header {
	height:80px;
	padding:15px 3% 5px;
//	background: lime;
}

/*ロゴ画像*/
header #logo img {
	width: 100px;
	float: left;
}

@media screen and (max-width: 800px){ 
	#indexarea{ width:100%; margin:0 auto; padding:0;}
	#indexin{ padding:0px; }
	#widearea{ width:100%; margin:0 auto; }
	#widein{ padding:30px 20px; }
	#maparea{ width:100%; margin:0 auto; }
}

@media screen and (min-width: 801px){
	#indexarea{ width:100%; margin:0 auto; }
	#indexin{ padding:0px; }
	#widearea{ width:100%; margin:0 auto; }
	#widein{ padding:0px 20px 30px; }
	#maparea{ width:100%; margin:0 auto; }
	#mapin{ padding:0px 20px 30px; }
}


/*大見出し
---------------------------------------------------------------------------*/
/*大見出しブロック*/
#h0 {
	background: var(--gradation02B);
	position:relative;
	z-index:5 !important;
}

#h0another {
	background: var(--gradation04B);
	position:relative;
	z-index:5 !important;
}

#extra-h0 {
	color:white;
	clear: both;
	margin:0 auto;
	font-size:1.8em;
	line-height:2.5em;
}

@media screen and (min-width:901px){
	#extra-h0 {
		padding: 0 1em;
		max-width:calc(1200px - 2em);
	}
}
@media screen and (max-width:900px){
	#extra-h0 {
		padding: 0 0.5em;
		max-width:calc(1200px - 1em);
	}
}

/* ハイパー大見出し */
#hh0{
	margin:0 auto;
	text-align:center;
	overflow: hidden;
	background: #402E2B;
	background-image:linear-gradient(90deg, #402E2B, #604E4B, #402E2B);
	color:white;
	height: 4.2em;
	font-size:1.8em;
	line-height:4.2em;
}

/*h1,h2,h3,h4タグの設定
---------------------------------------------------------------------------*/
h1{
	padding:1em;
	font-size:1.5em;
	text-align:center;
	color:hsla(0,0%,20%,1);
	font-weight:bold;
}

h2 {
	clear: both;
	font-size: 22px;
	margin-bottom: 20px;
	padding: 10px 20px;
	background: url(/sample/mountain00.png) no-repeat right 1em center, var( --gradation01B );
	color: hsla(360,100%,100%,1);
	border-radius: 5px 5px 5px 5px;
	text-shadow: 1px 1px 1px hsla(360,0%,0%,0.3);
}

h2.news{
	background: url(/newimg/Mihika_white_emblem.png) no-repeat right 1em center, var( --w031 );	/*背景画像の読み込みとグラデーション*/
}

h2.blog{
	background: url(/newimg/Mihika_white_emblem.png) no-repeat right 1em center, var( --w156 );	/*背景画像の読み込みとグラデーション*/
}

/* セクションタイトル：Mihika official shop line-up */
.shop-title {
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
    font-size: 1.8rem;
    color: #4a192c; /* メインカラー hsla(324,33%,25%,1) */
    text-align: center;
    margin: 4rem 0 3rem;
    letter-spacing: 0.15em;
    position: relative;
    padding-bottom: 1.5rem;
	background:none;
	border-radius:none;
	text-shadow:none;
}

/* タイトルの下の装飾線 */
.shop-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background-color: #b38e81; /* サブカラー hsla(21,20%,70%,1) */
}

h3 {
	clear: both;
	margin-bottom: 20px;	/*見出しの下にとるスペース*/
	padding: 6px 20px;		/*上下、左右への余白*/
	border: 1px solid #ccc;		/*枠線の幅、線種、色*/
	background: linear-gradient(#fff, #efefef);	/*グラデーション*/
}

h3::first-letter {
	border-left: 3px solid #534e40;	/*左側の線の幅、線種、色*/
	padding-left: 10px;				/*左側の線と、テキストとの余白*/
}

.product-h3 {
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
    font-size: 1.2rem;
    color: #4a192c;
    margin: 0.8rem 0 0.5rem;
    font-weight: normal;
    letter-spacing: 0.05em;
    line-height: 1.4;
	border:none;
}

@media (max-width: 900px) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.product-grid {
		grid-template-columns: 1fr;
	}
}

/* スマートフォン向けの調整 */
@media (max-width: 768px) {
    h2.shop-title {
        font-size: 1.5rem;
        margin: 3rem 0 2rem;
    }
    .product-info h3 {
        font-size: 1.1rem;
    }
}

h4{
	margin:10px 0 10px 0;
	background-image:linear-gradient(90deg, var( --color00 ) 100px, hsla(360,100%,100%,1) 100px);
}

h4#h4grad01{ background-image:linear-gradient(90deg, var( --color12 ) 100px, hsla(360,100%,100%,1) 100px); }
h4#h4grad02{ background-image:linear-gradient(90deg, var( --color09 ) 100px, hsla(360,100%,100%,1) 100px); }
h4#h4grad03{ background-image:linear-gradient(90deg, var( --color10 ) 100px, hsla(360,100%,100%,1) 100px); }

#h4parts{
	background:url(newimg/customplate.png) left center / 100px 47px no-repeat ;
	background-color:hsla(360,100%,100%,0.5);
	text-indent:24px;
	line-height:47px;
	vertical-align:top;
	color:#003366;
}

h5{
	display:block;
	margin:10px auto 10px;
	width:fit-content;
	background-color: var( --color09 );
}

#h5parts{
	background-image:linear-gradient(180deg,
	hsla(0,100%,100%,0.5) 1px ,
	hsla(0,100%,100%,1) 1px ,
	hsla(0,100%,100%,1) 2px ,
	hsla(0,100%,100%,0.5) 2px ,
	hsla(0,100%,100%,1) 50% ,
	hsla(0,100%,100%,0.5) 100%
);
	box-shadow: 0px 1px 3px hsla(256,20%,20%,1);
	padding:0em 2em;
	line-height:47px;
	vertical-align:top;
	color:#000000;
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* 水平線 … メインとフッターの切り替え */
#foothr{
	height:3px;
	background: linear-gradient(180deg, hsla(324,100%,100%,1) 0%, var( --color02 ) 95%);
	//background-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 66%, rgba(0,0,0,0.2) 66%, rgba(0,0,0,0.2) 100%);
}
/*------------------------------------------------------------------------------------------------------------------------*/
/* 水平線 … グラデーション */
.fhr{
	margin:24px 0;
	height: 1px;
	background-image: linear-gradient(90deg, hsla(0, 0%, 73%, 0), hsla(0, 0%, 73%, 0.5) 50%, hsla(0, 0%, 73%, 0) 100%);
}
/*------------------------------------------------------------------------------------------------------------------------*/
/* 水平線 … 見出し */
.fhr_head{
	margin: 0px;
	height: 2px;
	background-image: linear-gradient(180deg, rgba(204,204,204,1) 0%, rgba(204,204,204,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}
/*------------------------------------------------------------------------------------------------------------------------*/
/* 水平線 … 見出し黒線 */
.fhr_head_in{
	margin: 0px;
	height: 2px;
	background-image: linear-gradient(90deg, rgba(80,80,80,1) 0%, rgba(80,80,80,1) 50%, rgba(80,80,80,0) 60%, rgba(80,80,80,0) 100%);
}
/*------------------------------------------------------------------------------------------------------------------------*/
/* 桜の水平線 */
.sakura-hr {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 3rem 0;
    padding: 10px 0;
    position: relative;
    border: none;
}

/* 中央を通る薄い線 */
.sakura-hr::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color03), transparent);
    z-index: 1;
}

/* 花びらの形 */
.petal {
    width: 12px;
    height: 16px;
    background-color: rgba(255, 182, 193, 0.6);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    z-index: 2;
    transform: rotate(45deg);
    box-shadow: 0 0 5px rgba(255, 192, 203, 0.5);
}

/* 花びらの切れ込み（V字） */
.petal::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 4px;
    width: 4px;
    height: 4px;
    background: white; /* 背景色に合わせて調整 */
    border-radius: 50%;
}

/* 1つ1つの花びらに動き（傾き）をつける */
.petal:nth-child(1) { transform: rotate(15deg); }
.petal:nth-child(2) { transform: rotate(-25deg); margin-top: -10px; }
.petal:nth-child(3) { transform: rotate(45deg); }
.petal:nth-child(4) { transform: rotate(110deg); margin-top: 10px; }
.petal:nth-child(5) { transform: rotate(70deg); }

/*------------------------------------------------------------------------------------------------------------------------*/
/* 見出し */
.title{ line-height:2em; padding:0 0.2em; }
.title#blue{ background:#dae5e8; }
.title#silver{  background:#f4f4f4; }
.title#ashrose{  background:#e8dada; }
.title#brown{ background:#402e2b; color:white; }
.title#olive{ background:#726d40; color:white; }

/* 見出しフォントサイズ */
.title{ font-size:26px; }

/*------------------------------------------------------------------------------------------------------------------------*/

/* グローバルナビゲーション
---------------------------------------------------------------------------*/
#navi{
	margin:0px auto;
	color:#b0a0a8;
//	background:rgba(215, 255, 255, 1);
//	overflow: hidden;
	border-bottom:1px solid rgba(245, 245, 245, 1);
}
#navi a{ }
#navi a:hover { text-decoration: underline; }

#ex-navi {
	background:rgba(255, 255, 255, 1);
//	background:rgba(55, 255, 255, 1);
	clear: both;
	margin:0 auto;
	line-height:2em;
}

@media screen and (min-width: 901px){
	#navi{ width:auto; font-size:16px; }
	#navi img{ height:16px; }

	#ex-navi {
		padding: 0 2em;
		max-width:calc(1200px - 4em);
	}
}

@media screen and (max-width: 900px){
	#navi{ width:100%; font-size:20px; }
	#navi img{ height:18px; }

	#ex-navi {
		padding: 0 1em;
		max-width:calc(1200px - 2em);
	}
}

/*コンテンツ（mainとsubを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	max-width: calc(1200px - 6%);
	clear: both;
	overflow: hidden;
	background: #fff;	/*背景色*/
	margin:0 auto;
	padding: 1em 3% 3% 3%;		/*ボックス内の余白*/
}

#contents.top{
	padding: 3%;		/*ボックス内の余白*/
}

/*mainコンテンツ
---------------------------------------------------------------------------*/
#main {
	float: right;	/*左に回り込み*/
	width: 72%;		/*幅*/
	padding-bottom: 50px;
}

#main.top{
	width: 100%;		/*幅*/
	padding-bottom: 0px;
}

/*段落タグ設定*/
#main p {
	padding: 0.25em 20px 15px;	/*上、左右、下への余白*/
	line-height:1.5em;
//	background:brown !important;
}
.blog_honbun center {
	margin-top:-0.58em !important;
	line-height:1.5em !important;
//	background:gold !important;
}

/*段落 横のパディングなし no padding-horizontal*/
.np {
	padding: 0px 0px 15px;	/*上、左右、下への余白*/
}

/*リスト・箇条書き用 list paragraph*/
.lp {
	padding: 0px 20px 15px;	/*上、左右、下への余白*/
	line-height:3em;
}

/*subコンテンツ
---------------------------------------------------------------------------*/
/*subブロック*/
#sub {
	float: left;	/*右に回り込み*/
	width: 24%;		/*幅*/
	padding-bottom: 50px;
}

#sub a {
	text-decoration: none;
}

@media screen and (max-width:900px){

	#main, #sub {
		float: none;
		width: auto;
	}

}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	margin: 0 auto 0;
	text-align: center;
	padding: 10px 0 0;
	background:white;
}
footer a {
	text-decoration: none;
}
footer .pr {
	display: block;
	font-size: 80%;
}

#underarea{
	background: linear-gradient(180deg, var( --color01 ) 0%, var( --color02 ) 45%, var( --color01 ) 95%);
	margin:0;
	color:hsla(44,0%,100%,1);
}

#underarea a{
	color:hsla(44,9%,91%,1);
}

#underarea a:hover {
	color:hsla(44,19%,91%,1);
}



/*submitボタンの設定
---------------------------------------------------------------------------*/
input[type="submit"],
input[type="button"],
input[type="reset"] {
	padding: 10px 30px;	/*ボタン内の余白*/
	margin-bottom: 20px;
	border: none;
	border-radius: 30px;	/*角丸のサイズ*/
	background: linear-gradient(#fff, #eee);	/*グラデーション*/
	font-size: 16px;	/*文字サイズ*/
	border: 1px solid #ccc;
}
/*マウスオン時の設定*/
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
	background: #fff;	/*背景色*/
}

/*NEW
---------------------------------------------------------------------------*/
#new_word {
	display:inline-block;
	font-size:0.8em;
	background:var( --color01 );
	border-radius:5px;
	color:hsla(0,100%,100%,1);
	padding:0em 0.2em;
	font-weight:normal !important;
	width:fit-content;
}

#new_img {
	display:inline-block;
	width:40px;
	height:16px;
	margin:0 0 0 5px;
	background:url(newimg/New.png) no-repeat center bottom !important;
}

/*------------------------------------------------------------------------------------------------------------------------*/
.widebutton a, .widebutton a#wide_red{
	display:inline-block;
	color:white;
	text-decoration:none;
	background-repeat:no-repeat;
	margin:10px 0 10px 0;
	font-size:1.5em;
	background-position:center center;
	width:fit-content;
	padding:0.5em 1em;
	border-radius:4px;
}
.widebutton a:hover {
	background-color:hsla(8,19%,20%,1);
	color:white;
	text-decoration:underline;
}

.widebutton a#wide_red{
	background-color:var( --color10 );
}

@media screen and (min-width:901px){ }
@media screen and (max-width:900px){ }
/*------------------------------------------------------------------------------------------------------------------------*/
#footcontact { border:2px solid #c0c0c0; border-radius:5px; background:#f0f0f0; margin:10px auto; }
@media screen and (min-width:901px){ #footcontact { width:80%; max-width:1200px; } }
@media screen and (max-width:900px){ #footcontact { width:90%; } }
/*------------------------------------------------------------------------------------------------------------------------*/
#footnumber { font-size:2em; font-weight:bold; }
@media screen and (max-width:900px){ }
@media screen and (max-width:900px){ }
/*------------------------------------------------------------------------------------------------------------------------*/
#footmailbutton, #footyoyakubutton{ }

@media screen and (min-width:901px){ #footmailbutton{ } }
@media screen and (max-width:900px){ #footmailbutton{ } }

#footmailbutton a {
	display:block;
	background-repeat:no-repeat;
	background-position:center center; 
	padding:20px 0; 
}

@media screen and (min-width:901px){ #footmailbutton a{ width:45%; height:50px; line-height:50px; border-radius:15px; margin:0 2%; float:left;} }
@media screen and (max-width:900px){ #footmailbutton a{ width:90%; height:100px; line-height:100px; border-radius:30px; margin:0 auto 20px; } }
/*------------------------------------------------------------------------------------------------------------------------*/
#footmailbutton a.toiawase {
	background-color:var( --color03 );
	color:white;
}

@media screen and (max-width:600px){ #footmailbutton a.toiawase { font-size:16px; } }
@media screen and (max-width:750px){ #footmailbutton a.toiawase { font-size:24px; } }
@media screen and (max-width:900px){ #footmailbutton a.toiawase { font-size:32px; } }
@media screen and (min-width:901px) and (max-width:1100px){	#footmailbutton a.toiawase { font-size:27px; } }
@media screen and (min-width:1100px){ #footmailbutton a.toiawase { font-size:32px; } }

#footmailbutton a.toiawase:hover {
	box-shadow: 0px 0px 5px var( --color03 );
	text-decoration:underline;
}

#footmailbutton a.chuumon {
	background-color:var( --color08 );
	font-size:1.8em;
	color:white;
}
#footmailbutton a.chuumon:hover {
	box-shadow: 0px 0px 5px var( --color08 );
	text-decoration:underline;
}

#footmailbutton a.chuumonwide {
	background-color:var( --color04 );
	font-size:1.8em;
	color:white;
	
	width:90%;
	height:50px;
	line-height:50px;
	border-radius:15px;
	margin:0 auto 20px;
	float:none;
}
#footmailbutton a.chuumonwide:hover {
	box-shadow: 0px 0px 5px var( --color04 );
	text-decoration:underline;
}

/*------------------------------------------------------------------------------------------------------------------------*/
#footermenu{}
@media screen and (min-width:901px){
	#footermenu{
	    font-size: 14px;
		line-height:2.5em;
		padding-top:20px;
		padding-bottom:10px;
		padding-left:calc( 7% - 3px );

	    display:-webkit-box;
	    display:-moz-box;
	    display:-ms-flexbox;
	    display:-webkit-flex;
	    display:-moz-flex;
	    display:flex;

		align-items:stretch;
		
	}
}
@media screen and (max-width:900px){ 
	#footermenu{
	    font-size: 20px;
		line-height:2.5em;
		padding:20px;
	}
}
/*------------------------------------------------------------------------------------------------------------------------*/
.fmenu{}
.fmenu#m1, .fmenu#m2, .fmenu#m3{}
@media screen and (min-width:901px){
	.fmenu{
		margin:0;
		padding:0 2% 0;
		text-align:left;
		vertical-align:top;
	}
	.fmenu#m1{ width:38%; }
	.fmenu#m2{ width:26%; }
	.fmenu#m3{ width:17%; }
}
@media screen and (max-width:900px){
	.fmenu{
		margin:0 0 48px 0;
		width:100%;
		text-align:center;
		vertical-align:top;

		border-bottom:1px solid #bbbbbb;
	}
	.fmenu#m3{ border:none; }
}
/*------------------------------------------------------------------------------------------------------------------------*/
.fmenu a{
	display:block;
	color:#666666;
}
@media screen and (min-width:901px){ }
@media screen and (max-width:900px){ }
/*------------------------------------------------------------------------------------------------------------------------*/
.fmenu a#com{
}
@media screen and (min-width:901px){ }
@media screen and (max-width:900px){
	.fmenu a#com{
		display:inline-block;
		width:cal(50% - 10px);
		color:#666666;
	}
}
/*------------------------------------------------------------------------------------------------------------------------*/
.ftitle{
	color:hsla(44,0%,100%,1);
}
@media screen and (min-width:901px){
	.ftitle{
		font-size:18px;
	 }
}
@media screen and (max-width:900px){
	.ftitle{
		font-size:24px;
	 }
}
/*------------------------------------------------------------------------------------------------------------------------*/
/*流れフローチャート*/
.flow_A{ }
.flow_B1{ float:left; }
.flow_B2{ float:left;}
.flow_C1{ font-weight:bold; }
.flow_C2{ background:rgba(255,240,237,1); font-size:0.9em; }

.B1_circle{
	background:rgba(84,84,84,1);
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:bold;
	color:white;
	text-align:center;
}
@media screen and (min-width:901px){
	.flow_A{ background: linear-gradient(90deg, rgba(255,255,255,1) 17px, rgba(162,162,162,1) 17px, rgba(162,162,162,1) 19px, rgba(255,255,255,1) 19px); }
	.B1_circle{ width:36px; line-height:36px; border-radius:18px; font-size:18px; }
	.flow_B1{ width:41px; }
	.flow_B2{ width:calc( 100% - 46px ); }
	.flow_C1{ font-size:18px; }
	.flow_C2{ margin:5px 0 0 5px; }
}
@media screen and (max-width:900px){
	.flow_A{ background: linear-gradient(90deg, rgba(255,255,255,1) 21px, rgba(162,162,162,1) 21px, rgba(162,162,162,1) 23px, rgba(255,255,255,1) 23px); }
	.B1_circle{ width:44px; line-height:44px; border-radius:22px; font-size:22px; }
	.flow_B1{ width:49px; }
	.flow_B2{ width:calc( 100% - 54px ); }
	.flow_C1{ font-size:22px; }
	.flow_C2{ margin:10px 0 0 10px; }
}
/*------------------------------------------------------------------------------------------------------------------------*/
/* 水平線 … 小メニュー */
.fhr_link{
	margin: 0px;
	height: 2px;
	background-image: linear-gradient(180deg, rgba(229,229,229,1) 0%, rgba(229,229,229,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}
/*------------------------------------------------------------------------------------------------------------------------*/
.icon{}
@media screen and (min-width:901px){
	.icon{
		width:30px;
		margin:0 5px 0;
	}

	#QR{ transform:scale3d(0.8,0.8,0.8); }
}
@media screen and (max-width:900px){
	.icon{
		width:50px;
		margin:0 10px 0;
	}
	#QR{ }
}
/*------------------------------------------------------------------------------------------------------------------------*/
/* トップページ・ご挨拶 */
#top_about{
	
}
#top_about #tatebox{
	display: flex;
	background:rgba(245,245,245,1);
	writing-mode: vertical-rl;
	width:fit-content;
	margin:0 auto 100px;
	padding:1em;
	font-size:1.2em;
}

#top_about #whitebox{
	font-size:0.9em;
	line-height:1.5em;
	//background:rgba(255,255,255,0.8);
	margin:0 10px;
	padding:1em;
}

#top_about #photobox{
	background-image: url(/newimg/tutumu01.png);
	background-position: bottom right;
	background-size: 45%;
	background-repeat: no-repeat;
	width:100%;
	height:500px;
	margin:0;
}

@media screen and (min-width:901px){
	#top_about #whitebox{
		width:calc(640px - 2em);
	}
 }
@media screen and (max-width:900px){
	#top_about #whitebox{
		width:calc(100vw - 20px -2em) !important;
		margin:20px;
	}

	#top_about #photobox{
		background-size: 100%;
		height:600px;
	}
}

.freeboard{
	font-size:24px;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "小塚明朝 Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif !important;
	background-image:linear-gradient(0deg,
	hsla(280, 0%, 100%,1) 0px ,
	hsla(280, 10%, 97%,1) 4px ,
	hsla(280, 19%, 94%,1) 6px ,
	hsla(280, 0%, 100%,1) 100%
	);
	box-shadow: 0px 2px 5px hsla(280,19%,70%,1);
	padding:20px;
	border-radius:20px;
	text-align:center;
}

.freeboard#magenta{
	background-image:linear-gradient(0deg,
	hsla(330, 0%, 100%,1) 0px ,
	hsla(330, 40%, 97%,1) 4px ,
	hsla(330, 40%, 94%,1) 6px ,
	hsla(330, 0%, 100%,1) 100%
	);
	box-shadow: 0px 2px 5px hsla(330,40%,70%,1);
}

.boardhead{
	font-size:24px;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "小塚明朝 Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif !important;
	color: var( --color02 );
	font-weight:bold;
}

.boardhead#magenta{
	color: var( --color10 );
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* 目的から探す */

#width90{
	width:90%;
	margin:0 auto;
	text-align:left;
}

#imageborder{
	border:1px solid gray;
	padding:1px;
}

#addlink{
	//background:brown;
}

#addlink a{
	background:white;
	color:#402E2B;
	border:1px solid #402E2B;
	border-radius:4px;
	
	position:relative;
	float:right;
	padding:0.4em 1.2em;
	display:inline-block;
}

#addlink a:hover{
	color:white;
	background:#402E2B;
	border:1px solid #402E2B;
	border-radius:4px;
}

@media screen and (min-width:901px){ #addlink{ height:calc(1.8em + 20px); padding:10px 0;} }
@media screen and (max-width:900px){ #addlink{ height:calc(1.8em + 40px); padding:20px 0;} }
/*------------------------------------------------------------------------------------------------------------------------*/
.floatbox{ float:left; }
@media screen and (min-width:901px){
	.floatbox#w0_h20{ width:0%; }
	.floatbox#w5_h20{ width:5%; }
	.floatbox#w10{ width:10%; }
	.floatbox#w20{ width:20%; }
	.floatbox#w30{ width:30%; }
	.floatbox#w33{ width:calc(100% / 3); }
	.floatbox#w40{ width:40%; }
	.floatbox#w50{ width:50%; }
	.floatbox#w60{ width:60%; }
	.floatbox#w70{ width:70%; }
	.floatbox#w80{ width:80%; }
	.floatbox#w90{ width:90%; }
}
@media screen and (max-width:900px){
	.floatbox#w0_h20{ width:100%; height:20px; }
	.floatbox#w5_h20{ width:100%; height:20px; }
	.floatbox#w10{ width:90%; margin:0 5%; }
	.floatbox#w20{ width:90%; margin:0 5%; }
	.floatbox#w30{ width:90%; margin:0 5%; }
	.floatbox#w33{ width:90%; margin:0 5%; }
	.floatbox#w40{ width:90%; margin:0 5%; }
	.floatbox#w50{ width:90%; margin:0 5%; }
	.floatbox#w60{ width:90%; margin:0 5%; }
	.floatbox#w70{ width:90%; margin:0 5%; }
	.floatbox#w80{ width:90%; margin:0 5%; }
	.floatbox#w90{ width:90%; margin:0 5%; }
}
/*------------------------------------------------------------------------------------------------------------------------*/
ul.sns_btns li{	 }
@media screen and (min-width:901px){ 
	ul.sns_btns li{	float:left; }
}
@media screen and (max-width:900px){
	ul.sns_btns li{	display:inline-block; }
}
/*------------------------------------------------------------------------------------------------------------------------*/

.seethrough{
		display:block;
		background-size: cover;
		-webkit-background-size: cover;
}

.seethrough#see_tree { background:url(sample/square_tree.jpg) center center no-repeat; background-size:100% auto !important;}
.seethrough#see_heart{ background:url(sample/heart_connect.jpg) center center no-repeat; background-size:100% auto !important;}
.seethrough#see_balloon{ background:url(sample/toy_balloon.jpg) center center no-repeat; }
.seethrough#see_viola{ background:url(sample/viola.jpg) center center no-repeat; background-size:100% auto !important;}
.seethrough#see_bag{ background-position:center bottom; background-repeat: no-repeat; background-size:100% auto !important;}

.through_box{ display:block; font-size:18px; color:white; text-align: center; line-height:2em; margin:0 auto;}
.through_box#dark { background:hsla(360,0%,0%,0.5); }
.through_title{ font-size:22px; color:white; font-weight:bold; margin:0 0 10px 0; }

@media screen and (min-width:901px){ 

	.seethrough{
		width:100%;
		background-size:100% auto;

		background-attachment: fixed;
	}
		
	.through_box{
		// margin-top: -320px;
		padding: 140px 0 !important;
	}
		
	.through_title{ }
	
}

@media screen and (max-width:900px){

	.seethrough{
		width:100%;
	}

	.seethrough#see_bag{
		background-position:left center;
	}

	.through_box{
		// margin-top: -640px;
		padding: 170px 20px;
	}
		
	.through_title{ }
	
}

/*------------------------------------------------------------------------------------------------------------------------*/

        /* Products Section */
        .section-title {
            text-align: center;
            padding: 4rem 0 2rem;
            font-size: 2rem;
            color: var(--color08);
        }

		.product-grid {
			display: grid;
			/* デフォルト（PC）は3列 */
			grid-template-columns: repeat(3, 1fr); 
			gap: 2rem;
			padding: 0 5% 4rem;
		}

		/* タブレット・スマホ向けの修正 */
		@media (max-width: 960px) {
			.product-grid {
				/* 画面が少し狭くなったら2列に */
				grid-template-columns: repeat(2, 1fr);
				gap: 1.5rem;
			}
		}

		@media (max-width: 500px) {
			.product-grid {
				/* スマホでは1列に（2列のままが良ければここをrepeat(2, 1fr)に） */
				grid-template-columns: 1fr;
				gap: 1rem;
			}
			
			.product-card {
				/* スマホで余白が広すぎる場合は調整 */
				padding: 0.8rem;
			}
		}

		.product-card {
			background: #fff;
			padding: 1rem;
			border-radius: 8px;
			box-shadow: 0 4px 15px rgba(0,0,0,0.05);
			transition: transform 0.3s;
			/* はみ出し防止用のお守り */
			width: 100%;
			box-sizing: border-box;
		}

		.product-card:hover {
			transform: translateY(-5px);
		}

        .product-image {
            width: 100%;
            height: 300px;
			aspect-ratio: 1/1;
            background-color: var(--color04);
            border-radius: 4px;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        .product-info h3 {
            margin-bottom: 0.5rem;
            color: var(--color01);
        }

        .price {
            font-weight: bold;
            color: var(--color10);
            font-size: 1.2rem;
        }

        .badge {
            display: inline-block;
            padding: 0.2rem 0.5rem;
            background-color: var(--color09);
            color: #fff;
            font-size: 0.8rem;
            border-radius: 3px;
            margin-bottom: 0.5rem;
        }

/*------------------------------------------------------------------------------------------------------------------------*/

/*エリアの表示非表示と形状*/
.area {
	position: relative;
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 20px;
	margin:0;
	box-shadow: 0 0 8px gray;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 1s;
    animation-fill-mode: forwards;
	z-index:20;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:901px){ }
@media screen and (max-width:900px){ }
/*------------------------------------------------------------------------------------------------------------------------*/
#spacer10{ height:10px; }
#spacer20{ height:20px; }
#spacer30{ height:30px; }
#spacer40{ height:40px; }
#spacer50{ height:50px; }
#spacer60{ height:60px; }
#spacer70{ height:70px; }
#spacer80{ height:80px; }
#spacer90{ height:90px; }
#spacer100{ height:100px; }

/*------------------------------------------------------------------------------------------------------------------------*/
/* レスポンシブ スペーサー＆マージナライズ＆パディング */

@media screen and (min-width:901px){
	#spacer10_20{ height:10px; }
	#spacer20_40{ height:20px; }
	#spacer30_60{ height:30px; }
	#spacer40_80{ height:40px; }
	#spacer50_100{ height:50px; }
	#m10_20{ margin: 0 0 10px 0; }
	#m20_40{ margin: 0 0 20px 0; }
	#m30_60{ margin: 0 0 30px 0; }
	#m40_80{ margin: 0 0 40px 0; }
	#m50_100{ margin: 0 0 50px 0; }
	#p10_20{ padding:10px; }
	#p15_30{ padding:15px; }
	#p20_40{ padding:20px; }
}
@media screen and (max-width:900px){
	#spacer10_20{ height:20px; }
	#spacer20_40{ height:40px; }
	#spacer30_60{ height:60px; }
	#spacer40_80{ height:80px; }
	#spacer50_100{ height:100px; }
	#m10_20{ margin: 0 0 20px 0; }
	#m20_40{ margin: 0 0 40px 0; }
	#m30_60{ margin: 0 0 60px 0; }
	#m40_80{ margin: 0 0 80px 0; }
	#m50_100{ margin: 0 0 100px 0; }
	#p10_20{ padding:20px; }
	#p15_30{ padding:30px; }
	#p20_40{ padding:40px; }
}

.inline{ display:inline-block; margin:10px; max-width:calc(100% - 20px);}

@media screen and (min-width:901px){
	#onlypc		{ display:block; }
	#onlyphone	{ display:none; }
}
@media screen and (max-width:900px){
	#onlypc		{ display:none; }
	#onlyphone	{ display:block; }
}

@media screen and (min-width:901px){
	#inline-pc		{ display:inline-block; }
	#inline-phone	{ display:none; }
}
@media screen and (max-width:900px){
	#inline-pc		{ display:none; }
	#inline-phone	{ display:inline-block; }
}

#f_end { clear:both; }
.f_end { clear:both; }

/*------------------------------------------------------------------------------------------------------------------------*/
/* アニメーション */