@charset "utf-8";
/* CSS Document */

/* --- 設定用CSS　---*/

body,input,textarea,button,.button,.faux-button,.wp-block-button__link,.wp-block-file__button,.has-drop-cap:not(:focus)::first-letter,.has-drop-cap:not(:focus)::first-letter,.entry-content .wp-block-archives,.entry-content .wp-block-categories,.entry-content .wp-block-cover-image,.entry-content .wp-block-latest-comments,.entry-content .wp-block-latest-posts,.entry-content .wp-block-pullquote,.entry-content .wp-block-quote.is-large,.entry-content .wp-block-quote.is-style-large,.entry-content .wp-block-archives *,.entry-content .wp-block-categories *,.entry-content .wp-block-latest-posts *,.entry-content .wp-block-latest-comments *,.entry-content p,.entry-content ol,.entry-content ul,.entry-content dl,.entry-content dt,.entry-content cite,.entry-content figcaption,.entry-content .wp-caption-text,.comment-content p,.comment-content ol,.comment-content ul,.comment-content dl,.comment-content dt,.comment-content cite,.comment-content figcaption,.comment-content .wp-caption-text,.widget_text p,.widget_text ol,.widget_text ul,.widget_text dl,.widget_text dt,.widget-content .rssSummary,.widget-content cite,.widget-content figcaption,.widget-content .wp-caption-text {
	font-family: 'Noto Sans JP', sans-serif;
	font-size:15px;
	letter-spacing:0;
	color:#7d7d7d;
}
@media screen and (max-width:599px) {
body,input,textarea,button,.button,.faux-button,.wp-block-button__link,.wp-block-file__button,.has-drop-cap:not(:focus)::first-letter,.has-drop-cap:not(:focus)::first-letter,.entry-content .wp-block-archives,.entry-content .wp-block-categories,.entry-content .wp-block-cover-image,.entry-content .wp-block-latest-comments,.entry-content .wp-block-latest-posts,.entry-content .wp-block-pullquote,.entry-content .wp-block-quote.is-large,.entry-content .wp-block-quote.is-style-large,.entry-content .wp-block-archives *,.entry-content .wp-block-categories *,.entry-content .wp-block-latest-posts *,.entry-content .wp-block-latest-comments *,.entry-content p,.entry-content ol,.entry-content ul,.entry-content dl,.entry-content dt,.entry-content cite,.entry-content figcaption,.entry-content .wp-caption-text,.comment-content p,.comment-content ol,.comment-content ul,.comment-content dl,.comment-content dt,.comment-content cite,.comment-content figcaption,.comment-content .wp-caption-text,.widget_text p,.widget_text ol,.widget_text ul,.widget_text dl,.widget_text dt,.widget-content .rssSummary,.widget-content cite,.widget-content figcaption,.widget-content .wp-caption-text {
	font-size:15px;
}	
}

section h2 {
	font-size:250%;
	font-family: 'Noto Serif JP', serif;
	font-weight:500;
	text-align:center;
	border-bottom:1px solid #bfbfbf;
	padding-bottom:5px;
}
@media screen and (max-width:959px) {
section h2 {
	font-size:4.2vw;	
	}
}

@media screen and (max-width:599px) {
section h2 {
	font-size:5.5vw;	
	letter-spacing:-2px;
	}
}

.widgettitle {
	border-bottom:1px solid #7d7d7d;
}



.home-content figure img {
	width:100%;
	max-width:550px;　/* トップメインイメージ用　※デモ固有 */
}
#mainimage{
	display:block;
	margin:0 auto;
	max-width:960px;
}
@media screen and (max-width:767px) {
.home-content figure img {
	width:100%;
	padding:0 20px 200px 20px;
}
#mainimage p img{
	width:25vw;
	padding-left:20px;	
}
}





section#menu h3{
	font-family: 'Lato', sans-serif;
	font-weight:900;
	color:white;
}
section#under_block h3 {
	color:white;
}

/* ボタン01 開閉ボタン　上へ戻るボタン　下層ページ表題*/

p.btn01 a, 
#menu_btn a,
#page-top a:before {
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

p.btn01 a, 
#menu_btn a,
#page-top a:before,
section#menu h3,
section#under_block h3,
section#contact{
background: #604b44; /* Old browsers */
background: -moz-linear-gradient(top,  #604b44 0%, #443b30 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #604b44 0%,#443b30 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #604b44 0%,#443b30 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#604b44', endColorstr='#443b30',GradientType=0 ); /* IE6-9 */
}
section#menu h3,
section#under_block h3{
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

section#menu h4{
	color:#59493f;
}
a,
section#menu h3+p {
	color:orangered;
} 

section#nav,
section#faq,
#site-footer{
	background:#dfe6e8
}
section#product{
	background:white;
}
section#contact{
	background:#eeeeee;
}

section#contact h2 {
	color:#313131;
}


/* ナビ */

section#nav {
	padding:25px 0;
}

section#nav ul {
	width:calc(100% - 40px);
	max-width:960px;
	margin:0 auto;
	display:flex;
	justify-content:center;
	color:#535353;
}
section#nav ul li {
	text-align:center;
	font-size:77%;
	margin:0 20px;
	line-height:1.1;
}
section#nav ul li img {
	display:block;
	margin:0 auto 5px auto;
	max-width:45px;
}
section#nav ul li p {
	margin:0;
	font-size:130%;
	font-family: 'Lato', sans-serif;
	font-weight:900;
}
section#nav ul li a {
	text-align:center;
	text-decoration:none;
	color:inherit;
}

@media screen and (max-width:599px) {
	
section#nav ul li img {
	max-width:40px;
}
	
section#nav ul li {
	font-size:60%;
	margin:0 7px;
	letter-spacing:-1px;
}	
}

/* Ｑ＆Ａ */
#faq h2 {
	margin:0;
}

#faq div ul li{
    display: block;
    padding-top: 110px;
    margin-top: -70px;
}
#faq div ul li p{
	text-indent:calc(-1.5em - 17px);
	margin-left:calc(1.5em + 17px);	
}

#faq div ul li h3{
	font-size:120%;
	margin-top:0;
}
#faq div ul li h3:before{
	content:"Q";
	background:#f2a5a8;
	margin:0 5px 0 0;
	padding:5px 10px;
	color:white;
	font-weight:700;
	line-height:1;
	font-size:150%;
}
#faq div ul li p {
	padding:0 0 0 40px;
}
#faq div ul li p:before{
	content:"A";
	background:#9ac2e5;
	margin:0 5px 0 0;
	padding:5px 10px;
	color:white;
	font-weight:700;
	line-height:1;
	font-size:150%;
}
#faq div ul li p{
	margin-bottom:0;
}

@media all and (max-width: 767px) {
#faq div ul li{
    padding-top: 10px;
    margin-top: 30px;
}
#faq div ul li h3,
#faq div ul li p{
	font-size:100%;
}	
#faq div ul li p{
	font-size:100%;
	text-indent:calc(-1.8em - 12px);
	margin-left:calc(1.8em + 12px);	
}
#faq div ul li p:before{
	padding:3px 12px;
}
#faq div ul li p{
	padding:0;
}	
}

/* コンセプト */
section#concept {
	background:url('https://hito.atb-beauty.net/wp-content/uploads/2024/07/bg_02.jpg') center center;
	background-attachment:fixed;
	background-size:100% auto;
	color:white;
}
section#concept h2 {
	color:white;
	margin-bottom:70px;
}
section#concept .flex {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
section#concept .flex > div {
	width:50%;
	flex:none;
}
section#concept .flex > div img {
	display:block;
	margin:0 auto;
	max-width:80%;
}
section#concept .flex > p {
	line-height:2;
}

@media screen and (max-width:599px) {
section#concept {
	background:url('https://hito.rokupro.jp/wp-content/uploads/2020/11/bg_02.jpg') center center no-repeat;
	background-attachment:none;
	background-size:auto 100% ;
}	
}

/* プロダクト */
section#product > div {
	max-width:960px;
}
section#product > div > div.box {
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	margin-top:50px;
}
section#product > div > div.box > div {
	width:50%;
}

section#product > div > div.box > div img {
	display:block;
	margin:0 auto;
	max-width:80%;
}
section#product > div > div.box > div h3 {
	margin:0;
	font-size:200%;
	border-bottom:1px solid #bfbfbf;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	line-height:1;
	padding-bottom:7px;
}
section#product > div > div.box > div h3 span {
	font-size:45%;
	letter-spacing:0;
}

section#product > div > div.box > div p.price {
	margin:2px 0 30px 0;
	text-align:right;
	font-size:90%;
}
section#product > div > div.box > div p.read {
	line-height:2;
}
section#product > div > div.box > div > div {
	display:flex;
	align-items:flex-start;
	font-size:90%;
	padding:20px 0;
	border-top:1px solid #bfbfbf;
	border-bottom:1px solid #bfbfbf;
}
section#product > div > div.box > div > div h4 {
	font-weight:normal;
	font-size:100%;
	white-space:nowrap;
	margin:0;
	padding-right:13px;
}
section#product > div > div.box > div > div p {
	margin:0;
}


@media screen and (max-width:767px) {
section#product > div > div.box > div img {
	max-width:70%;
	margin-bottom:15px;
}
section#product > div > div.box > div h3 {
	font-size:8vw;
}
section#product > div > div.box > div h3 span {
	font-size:45%;
}
}

@media screen and (max-width:767px) {
section#concept .flex,
	section#product > div > div.box {
	display:block;
}
section#concept .flex > div,
	section#product > div > div.box > div {
	width:100%;
}
section#concept .flex > p {
	margin-top:30px;
}
}

/* contact us */
#contanct_box {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	margin-top:80px;
	padding-bottom:50px;
}
#contanct_box > div:first-child {
	width:50%;
	text-align:center;
	color:black;
}
#contanct_box > div:last-child {
	width:20%;
}
#contanct_box > div:last-child img {
	margin:0 auto;
	display:block;
}
#contanct_box h3{
	font-weight:normal;
}
#contanct_box h3 span {
	color:#00b800;
}
#contanct_box p {
	line-height:1.8;
}
#contanct_box a {
	display:block;
	background:#01b903;
	text-decoration:none;
	color:white;
	padding:20px;
	width:60%;
	margin:40px auto 0 auto;
	border-radius:100px;
	font-size:120%;
	box-shadow:3px 3px 5px rgba(0,0,0,0.2);
}
#contanct_box a:hover {
	opacity:0.8;
}

@media screen and (max-width:767px) {
	#contanct_box {
		margin-top:40px;
		flex-direction:column-reverse;
	}
	#contanct_box > div:first-child,
	#contanct_box > div:last-child {
		width:100%;
		text-align:center;
	}
#contanct_box a {
	padding:15px;
	margin:30px auto 0 auto;
	width:70%;
	}
}