@charset "utf-8";
/*------------------------------------------------
sp
--------------------------------------------------*/
.sp{
	display:none;
}
#spMenu{
	display: none;
}
@media screen and (max-width: 768px) {
.pc{display: none;}
.sp{ display: block;}
html {
    overflow: auto;
    height: 100%;
}
body{
	font-size:90%;
	-webkit-text-size-adjust: 100%;
	padding-top:21vw !important;
	padding-top: 18.5vw !important;
}
body.scrollnone{
	overflow:hidden !important;
	height:100% !important;
}
img{ width: 100%;}
.container{
	width:100%;
	margin:0;
	overflow:hidden;
	padding:0 3vw;
}
p{
	line-height: 1.8;
}
.left,
.right{ float:none;}
.absolute{
	top:0 !important;
	right:0 !important;
	bottom:0 !important;
	left:0 !important;
	margin:0;
	position:relative;
	transform:translate(0,0) !important;
}
.section01 {
    padding: 30px 3vw;
}



/*------------------------------------------------
layout
--------------------------------------------------*/
.table01 th,
.table01 td{
	width: 100%;
	display: block;
	padding:3vw;
}
.table01 th{
	background-color:#EEEEEE;
	border:none;
	font-size: 1.1em;
}
.anchor{
	margin-top:-18vw !important;
	padding-top:18vw !important;
}
.lh200{
	line-height: 1.4;
}
.mainContainer {
    width: 94%;
    background-color: #FFFFFF;
    margin: 0 auto;
    min-height: 0;
	padding-top: 3vw;
}
.hr01{
	width: 100%;
	height: 4vw;
}



/*------------------------------------------------
title
--------------------------------------------------*/


.title01 span:nth-of-type(1){
	margin-bottom: 5px;
}
.title02 span br{
	display:inline;
}



/*------------------------------------------------
link
--------------------------------------------------*/
.btn01{
	margin-top: 30px;
	max-width:100%;
}

/*------------------------------------------------
header
--------------------------------------------------*/
#spHeader{
	position:fixed;
	top:0;
	width: 100%;
	overflow:hidden;
	padding:2vw 0;
	
	box-shadow:0 5px 5px rgba(0,0,0,0.2);
	z-index:99999;
}
#spHeader h1{
	width: 60%;
	float: left;
    background-size: 70%;
    height: 14vw;
    background-position: center top;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 10vw;
font-size: 8px; /* 文字サイズを追加 */
}
#spHeader h1 span:nth-of-type(1){
	margin-bottom: 5px;
}
#spHeader h1 span:nth-of-type(2){
	line-height: 1.2;
}
#spHeader ul{
	width: 40%;
	padding-top: 2vw;
	float: right;
}
#spHeader ul li{
	width: 33%;
}
#spMenu{
	position:fixed;
	z-index:99999;
	width: 100%;
	top:18.5vw;
	color:#333;
	box-shadow:0 5px 5px rgba(0,0,0,0.5);
	background:#FFF repeat center top;
}
#spMenu ul{
	border-top:1px solid #333;
	padding:0 5vw 5vw;
}
#spMenu ul li{
	width: 42.5vw;
}
#spMenu ul li a{
	display: block;
	text-align:left;
	padding:5vw 0;
	border-bottom:1px dotted #333;
}
#spMenu ul li.spMenu_1line{
	width: 100%;
}
.spMenu_icon{
	padding:0 5vw 5vw;
}



/*------------------------------------------------
menu
--------------------------------------------------*/


/*------------------------------------------------
footer
--------------------------------------------------*/
#footer{
	width: 100%;
}
.footerLinks{
	display: none;
}
.copyright{
	text-align:center;
	width: 100%;
}

/*------------------------------------------------
page
--------------------------------------------------*/


/*------------------------------------------------
home
--------------------------------------------------*/
.homeLead_p01 {
    padding: 1em 0 30px;
}
.recommendedList li {
    width: 42vw;
    margin-top: 30px;
}
.recommendedList li h3{
	font-size: 110%;
	margin:8px 0;
}
.worksList-item {
    width: 33.33%;
}
.artist_box01{
	padding:10px;
}
.artistImage {
    width: 100%;
}
.artistImage img{
	display: block;
	margin:0 auto;
	width: 100%;
}
.artistText {
    width: 100%;
	margin-top: 3vw;
}
.artistText h3 {
    margin-bottom: 10px;
	text-align:center;
}
.priceList,
.optionList{
	margin-top: 0;
}
.priceList li,
.optionList li {
    width: 100%;
	margin-top: 30px;
}
.priceTable th,
.priceTable td{
    font-size: inherit;
}
.option_image,
.option_text{
    width: 100%;
}
.howtoorderList dt span:nth-of-type(2){
	font-size: 120%;
}
#orderForm h3{
	font-size: 130%;
}
.magao_p01{
	text-align:left;
}
.magao_p01 br{
	display: none;
}
.magaoList01 li{
	width: 44%;
	margin:0 3% 3vw;
}
.magaoList02 li{
	width: 31%;
	margin-right:3.5% !important;
	margin-bottom: 3vw;
}
.magaoList02 li:nth-of-type(3n){
	margin-right:0 !important;
}
.magaoPrice_p01,
.magaoPrice_p03{
	font-size: 200%;
}
.magaoPrice_p02{
	font-size: 120%;
}
.magaoPriceList li{
	width: 31%;
	margin-right: 3.5% !important;
	margin-bottom: 3vw;
}
.magaoPriceList li:nth-of-type(3n){
	margin-right:0 !important;
}
.proList li{
	width: 48%;
	margin-bottom: 3vw;
}
@media (max-width: 768px) {
    /* 全体のセクション */
    .kiroku-board-section {
        padding: 20px; /* スマホ用に余白を少し狭く */
        background-color: #f9f9f9; /* 背景色はPCと同じ */
    }

    /* 見出しエリア */
    .main-heading h2 {
        font-size: 20px; /* 見出しサイズを少し小さく */
        text-align: center;
        margin-bottom: 15px;
    }

    .main-heading p {
        font-size: 14px; /* サブタイトルの文字サイズを調整 */
        text-align: center;
        margin-bottom: 15px;
        color: #555;
    }

    /* 左右分割セクション */
    .main-content {
        display: flex;
        flex-wrap: wrap; /* スマホでは縦並びを許容 */
        gap: 15px; /* 画像とテキストの間隔 */
    }

    .content-left {
        flex: 0 0 100%; /* 画像を全幅表示 */
        padding-right: 0; /* スマホでは左右の余白をリセット */
        text-align: center; /* 画像を中央揃え */
    }

    .content-left img {
        width: 80%; /* スマホでは80%の幅で表示 */
        height: auto;
        margin: 0 auto; /* 余白を中央に */
    }

    .content-right {
        flex: 0 0 100%; /* テキストを全幅表示 */
        padding-left: 0; /* スマホでは左右の余白をリセット */
        text-align: justify; /* 両端揃えで整った印象に */
    }

    .content-right p {
        font-size: 14px; /* テキストサイズを小さく調整 */
        line-height: 1.6; /* 行間を少し狭める */
        color: #333;
        margin-bottom: 10px;
    }

    /* ギャラリーセクション */
    .gallery-section {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; /* ギャラリーの間隔を調整 */
        justify-content: center; /* 中央揃え */
    }

    .gallery-item {
        flex: 0 0 calc(50% - 10px); /* 2列レイアウト */
        box-sizing: border-box;
    }

    .gallery-item img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto; /* 中央揃え */
    }
}