@charset "utf-8";
/*
Theme Name: 似顔絵ショップ2020
Author: NIGAOE Inc.
Author URI: http://nigaoe-inc.jp
Version: 1.0
License: NIGAOE Inc. all rights reserved.
*/

/*------------------------------------------------
reset
--------------------------------------------------*/
html, body, header, footer, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6 , p, blockquote, pre,
a, address , abbr, acronym, aress, article, aside, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, section,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, nav,
dl, dt, dd , ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
hr{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size:inherit;
	background: transparent;
	font-weight:inherit;  
	text-decoration:none;
	font-family:inherit;
	color:inherit;
	box-sizing:border-box;
	font-style:normal;
	text-align:left;
	list-style: none;
	position:relative;
	line-height:1.8;
}
input, textarea, select{
	font-size:inherit;
	font-family:inherit;
	font-weight:inherit;
}

body {
    font-family: 'Noto Serif JP', serif; /* 明朝体で統一 */
    font-weight: 400; /* 通常の太さ */
    line-height: 1.6; /* 読みやすさのため適宜調整 */
    color: #333; /* テキストカラー（適宜変更） */
}



h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* 太字 */
    font-family: 'Noto Serif JP', serif;
}

/* h3.fz20に明朝体を適用 */
h3.fz20 {
    font-family: 'Yu Mincho', 'ヒラギノ明朝 ProN', 'Noto Serif JP', serif; /* 明朝体 */
    font-weight: normal;
}


img{
	vertical-align:bottom;
	max-width:100%;
}
img.maxWidthNone{
	max-width:none;
}
p{ line-height:2;}
input[type="text"],
input[type="email"],
textarea{
	width: 100%;
	display: block;
	box-sizing:border-box;
	padding:0;
}


/*------------------------------------------------
layout
--------------------------------------------------*/
.left{ float:left;}
.right{ float:right;}
.clearfloat{
    overflow: hidden;
    position: relative;
    zoom:1;
}
.absolute{
	position:absolute;
}
.absolute img,
img.absolute{
	max-width:none;
}
.flexSpace{
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
.flexStart{
	display: flex;
	flex-wrap:wrap;
}
.flexCenter{
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
}
.flexEnd{
	display: flex;
	flex-wrap:wrap;
	justify-content:flex-end;
}
.hidden{
	display: none;
}
.objectfit{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.container{
	width: 980px;
	margin:0 auto;
	padding:0 70px;
}
.mainContainer{
	width: 980px;
	background-color:#FFFFFF;
	margin:0 auto;
	min-height:calc(100vh - 200px);
}
.hr01{
	display: block;
	width: 840px;
	margin:0 auto;
	height: 8px;
	border:none;
}
.section01{
	padding:50px 70px;
}
.anchor{
	padding-top: 65px;
	margin-top: -65px;
	display: block;
	position:relative;
	z-index:-9999;
}
.table01{
	width: 100%;
	border-collapse:collapse;
}
.table01 th,
.table01 td{
	padding:25px;
	line-height: 1.4;
	vertical-align:top;
	border-bottom:1px dotted #999999;
}
.table01 th{
	width: 250px;
	font-weight:500;
	border-bottom:1px dotted #999999;
}
.dl01 dt,
.dl01 dd{
	line-height: 1.4;
}
.dl01 dd{
	color:#333333;
	margin:10px 0 30px;
	padding-left: 1em;
}

.dl01 dd a{
	text-decoration:underline;
}
.p01{
	margin:30px 0;
}

/*------------------------------------------------
font
--------------------------------------------------*/

.fz12{ font-size: 75%;}
.fz13{ font-size: 81%;}
.fz14{ font-size: 87%;}
.fz15{ font-size: 94%;}
.fz17{ font-size: 106%;}
.fz18{ font-size: 112%;}
.fz19{ font-size: 119%;}
.fz20{ font-size: 125%;}
.fz21{ font-size: 131%;}
.fz22{ font-size: 137%;}
.fz23{ font-size: 144%;}
.fz24{ font-size: 150%;}
.fz25{ font-size: 156%;}
.fz26{ font-size: 160%;}
.fz27{ font-size: 169%;}
.fz28{ font-size: 175%;}
.fz29{ font-size: 180%;}
.fz30{ font-size: 187%;}
.fz32{ font-size: 200%;}
.fz33{ font-size: 206%;}
.fz34{ font-size: 212%;}
.fz36{ font-size: 225%;}
.fz37{ font-size: 231%;}
.fz39{ font-size: 244%;}
.fz40{ font-size: 250%;}
.fz45{ font-size: 280%;}
.fz50{ font-size: 315%;}
.fz55{ font-size: 344%;}
.fz60{ font-size: 375%;}
.fz66{ font-size: 400%;}
.fz70{ font-size: 435%;}
.fz80{ font-size: 500%;}
.fz90{ font-size: 562%;}
.fz100{ font-size: 625%;}
.fz135{ font-size: 844%;}
.regular{
	font-weight:400;
}
.medium{
	font-weight:500;
}
.bold{
	font-weight:700;
}
.ls100{
	letter-spacing:0.1em;
}
.ls200{
	letter-spacing:0.2em;
}
.ls300{
	letter-spacing:0.3em;
}
.taCenter{
	text-align:center;
}
.lh120{
	line-height: 1.2;
}
.lh130{
	line-height: 1.3;
}
.lh140{
	line-height: 1.4;
}
.lh150{
	line-height: 1.5;
}
.lh200{
	line-height: 2;
}
.lh220{
	line-height: 2.2;
}


/*------------------------------------------------
title
--------------------------------------------------*/
.title01 span {
    display: block;
    text-align: center;
    font-family: 'Yu Mincho', 'ヒラギノ明朝 ProN', 'Noto Serif JP', serif !important; /* 優先度を高める */
    font-weight: normal !important;
}
.title01 span:nth-of-type(1){
	margin-bottom: 10px;
}
.title02{
	text-align:center;
}
.title02 span{
	display:inline-block;
	padding:10px 30px;
	border-radius:calc(1em + 20px);
	text-align:center;
	background-color:#79AE13;
	color:#FFFFFF;
}
.bg_black .title02 span{
	background-color:#FFFFFF;
	color:#000000;
}

/*------------------------------------------------
link
--------------------------------------------------*/
a,
.pointer,
button,
input[type="submit"]{
	transition: opacity 0.3s ease-out;
	cursor:pointer;
}
a:hover,
.pointer:hover,
button:hover,
input[type="submit"]:hover{
	opacity:0.8;
}
.btn01{
	display: block;
	width: 300px;
	height: 50px;
	color:#FFFFFF;
	text-align:center;
	margin:50px auto 0;
	line-height: 50px;
}
.btn01 i{
	margin-right: 8px;
}


/*------------------------------------------------
color
--------------------------------------------------*/
.bg_black{
	background-color:#000000;
	color:#FFFFFF;
}
.red{
	color:#FF4649;
}

/*------------------------------------------------
header
--------------------------------------------------*/
#header{
	
	box-shadow:0 5px 5px rgba(0,0,0,0.2);
	z-index:99999;
	width: 100%;
}
#header h1{
    background-size: auto 150px;
    background-repeat: no-repeat;
    background-position: center 15px;
    padding-top: 140px;
    height: 170px;
    text-align: center;
}
#mainMenu ul li a{
	display: block;
	padding:15px 15px;
	transition: all 0.3s ease-out;
}
#mainMenu ul li a span{
	display: block;
	text-align:center;
}
#mainMenu ul li a span:nth-of-type(1){
	margin-bottom: 10px;
    font-size: 18px;
}
#mainMenu ul li a span:nth-of-type(2){
    font-size: 14px;
}
#mainMenu ul li a:hover{
	background-color:rgba(255,255,255,0.5);
	opacity:1;
}
.mainMenu_icon a{
	background-color:#FFFFFF;
	color:#a1a1a1;
}
.headerFixed{
	position:fixed;
	top:-130px;
}

#siteLogo, #spSiteLogo {
    background-image: url('<?php echo option_logo; ?>');
    background-size: contain;
    background-repeat: no-repeat;
    width: 350px; /* 必要に応じて変更 */
    height: 80px; /* 必要に応じて変更 */
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    margin: 0 auto; /* 中央寄せ */
}

#header, #spHeader {
    text-align: center; /* コンテナ内で中央揃え */
}

/*------------------------------------------------
footer
--------------------------------------------------*/
#footer{
	width: 980px;
	margin:0 auto;
	padding:15px 0;
}
.footerLinks a{
	display:inline-block;
	margin-right: 10px;
}
.totop{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
}
.totop a{
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 45px;
    border-radius: 100%;
    color: #FFFFFF;
}

/*------------------------------------------------
page
--------------------------------------------------*/
.homeLead_p01{
	padding:30px 0;
}
.recommendedList li{
	width: 260px;
	margin-top: 30px;
}
.recommendedList li h3{
	text-align:center;
	margin:15px 0;
	font-weight:500;
}
.worksList{
	margin-top: 30px;
}
.worksList-item{
	width: 210px;
	padding:5px;
}
/* 共通セクションスタイル */
.section-content {
    margin: 30px auto;
    padding: 0 20px;
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px; /* 画像とテキスト間の余白 */
}

/* 画像部分のスタイル */
.section-image {
    flex: 1 1 40%; /* 画像部分の幅を40% */
    text-align: center;
}

.section-image img {
    width: 100%;
    max-width: 450px; /* 画像の最大幅を統一 */
    height: auto;
    margin: 0 auto;
    display: block;
   
}

/* テキスト部分のスタイル */
.section-text {
    flex: 1 1 60%; /* テキスト部分の幅を60% */
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.section-text h2,
.section-text h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    text-align: center;
}

.section-text p {
    margin-top: 10px;
    text-align: justify; /* 両端揃え */
}

/* SNSアイコン（アーティスト紹介専用） */
.artist_sns {
    margin-top: 15px;
    text-align: center;
}

.artist_sns li {
    display: inline-block;
    margin-right: 15px;
}

.artist_sns li a {
    font-size: 24px;
    color: #555;
}

/* アーティスト紹介エリア */
.artistText {
    width: 100%;
    margin-top: 3vw;
    text-align: center; /* 中央揃えに統一 */
    font-size: 16px; /* フォントサイズを統一 */
    line-height: 1.8; /* 行間を統一 */
    color: #555;
}

.artistText h3 {
    font-size: 20px; /* アーティスト名を強調 */
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    color: #333;
}

/* お客様の声セクション */
.section-customer-voice {
    margin-top: 30px;
    padding: 0 20px;
    background-color: inherit;
}

.section-customer-voice h2 {
    font-size: 20px; /* 見出しのフォントサイズを調整 */
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
}

.customer-voice-text {
    width: 100%;
    margin-top: 3vw;
    text-align: center;
    font-size: 16px; /* アーティスト紹介と統一 */
    line-height: 1.8; /* 行間を統一 */
    color: #555;
}

/* 画像のスタイル統一 */
.artistImage,
.customer-voice-image {
    width: 100%;
    margin-top: 3vw;
}

.artistImage img,
.customer-voice-image img {
    display: block;
    margin: 0 auto;
max-width: 450px; /* 画像の最大幅を統一 */

   
  
}

/* 全体のセクション */
.kiroku-board-section {
    padding: 30px;
    background-color: #f9f9f9;
}

/* 見出しエリア */
.main-heading h2 {
    font-size: 25px;
    text-align: center;
    margin-bottom: 20px;
}

.main-heading p {
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
    color: #555;
}

/* 左右分割セクション */
.main-content {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.content-left {
    flex: 1;
    padding-right: 20px;
}

.content-left img {
    width: 100%;
    height: auto;
    display: block;
}

.content-right {
    flex: 1;
    padding-left: 20px;
}

.content-right p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* ギャラリーセクション */
.gallery-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.gallery-item {
    flex: 1 1 calc(25% - 20px); /* 4列レイアウト */
    box-sizing: border-box;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}


.priceList{
	margin:30px 0 50px;
}
.priceList li{
	width: 260px;
}
.priceList li h3{
	font-weight:500;
	text-align:center;
	padding-bottom: 10px;
}
.priceList li:nth-of-type(1) h3{
	border-bottom:10px solid #00BCB9;
}
.priceList li:nth-of-type(2) h3{
	border-bottom:10px solid #FB8F00;
}
.priceList li:nth-of-type(3) h3{
	border-bottom:10px solid #FF71A0;
}
.priceBox{
	background-color:#F7F9FA;
	padding:20px;
}
.price_image{
    width: 100%;
    height: 220px;
}
.price_price{
	margin:15px 0;
	line-height: 1;
}
.priceTable{
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    margin: 30px 0 0;
}.price_p01{
	text-align:right;
}
.priceTable + .price_p01{
    margin: 10px 0 50px;
}
.priceTable th,
.priceTable td{
    text-align: center;
    padding: 15px 0;
    line-height: 1.6;
    font-size: 20px;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
}
.priceTable thead th{
    width: 100%;
    font-weight: bold;
    background-color: #e3e3e3;
}
.priceTable tbody th,
.priceTable tbody td{
    width: 50%;
}
.priceTable tbody th{
    font-weight: bold;
}
.priceTable tbody td span{
    font-size: 16px;
}
.optionList{
	margin-top: 30px;
}
.optionList li{
	background-color:#F7F9FA;
	padding:20px;
	width: 100%;
    margin-bottom: 20px;
}
.optionList li h4{
	margin:10px 0;
}
.option_image{
    width: 230px;
}
.option_text{
    width: 550px;
}
.howtoorderList{
	margin-top: 30px;
}
.howtoorderList dt span:nth-of-type(1){
	display:inline-block;
	width: 70px;
	border-radius:5px;
	margin-right: 15px;
	height: 25px;
	line-height: 25px;
	text-align:center;
	color:#FFFFFF;
}
.howtoorderList dt{
	line-height: 1.4;
}
.howtoorderList dd{
	margin-top: 10px;
	line-height: 1.4;
	padding-left: 1em;
}
.howtoorderList dd:after{
	display: block;
	content:'';
	background:url(lib/images/orderflow_arrow.png) no-repeat 20px top;
	background-size:25px;
	height: 25px;
	margin:15px 0;
}
.howtoorderList dd:last-child:after{
	display: none;
}
.howtoorder_customer{
	background-color:#1a1a1a
}
.howtoorder_shop{
	background-color:#1a1a1a;
}
.howtoorderList dd a{
	text-decoration:underline;
}



.order_p01{
	padding:30px 0;
}
#orderForm h3{
	padding-left: 10px;
	border-left: 8px solid;
	line-height: 40px;
	height: 40px;
	margin-bottom: 20px;
}
#orderForm .table01{
	margin-bottom: 40px;
}
.orderForm_btn{
	display: block;
	font-size: 120%;
	text-align:center;
	width: 300px;
	margin:30px auto 0;
	padding:15px 0;
	color:#FFFFFF;
	border:none;
	font-weight:500;
	appearance:none;
	border-radius:0;
}
.orderForm_td01 .wpcf7-list-item{
	display: block;
	line-height:1.5;
}
#orderForm td select{
	display:inline-block;
}