@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.al-c{text-align:center;}
.al-l{text-align:left;}
.al-r{text-align:right;}
.service_item {
    position: relative;
    background: #e2fbe2;
}
.service_item_image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.service_item_detail {
    padding: 4em 3em;
}

.page .entry-title, .date-tags {display:none;}
.page .content {margin-top: 0px;}

.pagekv {
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	height:300px;
}

.about {
    margin: auto;
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    -webkit-transform: translateY(-80px);
    transform: translateY(-80px);
}
.aboutbox {
    background: #fff;
    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
    padding: 50px;
}

/*
	background: linear-gradient(to right, rgba(44,165,89),rgba(244,222,65));
	background-color: transparent;*/
.navi {background-color: transparent;}
.navi-in a {
	font-weight: bold;
	text-shadow: 1px 1px 2px #b3b3b3;
}
.navi-in a:hover {
	background-color: rgba(255,255,255,0.2);
}
.fixed-header {
	background-color: rgba(255,255,255,0.5);
	box-shadow: none;
}

.h1service {
    background-image: url('https://dioscorea.xsrv.jp/hokari/wp-content/uploads/pagekv_2.png');
}
.h1about {
    background-image: url('https://dioscorea.xsrv.jp/hokari/wp-content/uploads/pagekv_3.png');
}
.h1contact {
    background-image: url('https://dioscorea.xsrv.jp/hokari/wp-content/uploads/pagekv_3.png');
}
.h1service span,.h1about span,.h1contact span {
    position: absolute;
    left: 0;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    width: 100%;
    text-align: center;
    letter-spacing: .2em;
    font-size: 2.4rem;
    font-weight: 400;
    color: #fff;
	top: 120px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
	.appeal .appeal-in {min-height: 400px!important;}
	.service_item div {width: 100%;}
	.service_item_image {
		padding-top: 61.77419%;
	    max-width: 100%;
	}
	.service_item_detail {
	    padding: 0em 1.5em 2em;
	}
	.page .article h2 {
		font-size: 32px!important;}
	.page .article h2 span {font-size: 1.2rem!important;}
	.page .article h3 {
		font-size: 24px!important;
		margin-top: 1.6em!important;
		margin-bottom: 0.6em!important;
	}
	.aboutbox {padding: 2em;}
}
	
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*835px以上*/
@media screen and (min-width: 835px){
.service_item {
    display: flex;
    flex-wrap: nowrap;
}
.service_item_image, .service_item_detail {
    flex-basis: 50%;
    width: 50%;
    max-width: 50%;
}
	.service_item_r {order: 2;}
	.service_item_l {order: 1;}
.spotlist {margin-bottom:6em!important;}
}