@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/



/* お問い合わせボタン */
a.btn_contact {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	margin: 0 auto;
	padding: 1rem;
	font-weight: bold;
	border-radius: 10px;
	color: #FFFFFF;
	background-color: #d3381c;
	border: 3px solid #d3381c;
	box-shadow: 5px 5px #A00;
	transition: 0.3s ease-in-out;

	font-size: 1.3em;
}
a.btn_contact:hover {
	box-shadow: none;
	transform: translate(5px, 5px);
	color: #FFFFFF;
}
a.btn_contact .flex_box {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 0;
    gap: 1%;
}

.flex_box > div {
	width: 49.5%;
    margin: 0;
}

.flex_box > div p {
	margin: 0;
}

@media screen and (max-width: 834px) {
	a.btn_contact{
		padding: 5px;
	}
	
	.flex_box {
        gap: 1.8em!important;
        flex-direction: column;
	}
    .flex_box > div {
        width: 100%;
    }
}

/* FAQ */
/*
<details class="qa-1">
   <summary>質問</summary>
   <p>回答</p>
</details>
*/
.qa-1 {
    width: 100%;
    margin-bottom: 7px;
    border: 1px solid #d6dde3;
    border-radius: 5px;
}

.qa-1 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa-1 summary::before,
.qa-1 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-1 summary::before {
    color: #75bbff;
    content: "Q";
}

.qa-1 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333;
    border-right: 3px solid #333333;
    content: '';
    transition: transform .5s;
}

.qa-1[open] summary::after {
    transform: rotate(225deg);
}

.qa-1 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-1[open] p {
    transform: none;
    opacity: 1;
}

.qa-1 p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}

/* ボックスメニュー表示用 */
.box-menu-icon{
	color: #0d2569;
}

.widget_box_menu{
	margin-top: 60px;
}

.widget_box_menu .widget-title {
	text-align: center;
	font-size: 1.5em;
	font-weight: 900;
	background-color: #0d2569;
	color: #FFF;
}

/* 引用 */
/*<blockquote class="quote-2">
    <p>かぎ括弧で囲いアイコンを付けた、可愛らしい引用ボックスです。</p>
    <p>ここに引用するコンテンツを入れます。ここに引用するコンテンツを入れます。</p>
    <cite>出典：ここに引用元を入れる</cite>
</blockquote>*/
.quote-2 {
    max-width: 500px;
    position: relative;
    padding: 2.5em 2.5em 2em 3em;
    color: #333333;
}

.quote-2::before,
.quote-2::after {
    display: inline-block;
    position: absolute;
    width: 4em;
    height: 4em;
    content: '';
}

.quote-2::before {
    top: 0;
    left: 0;
    border-top: 3px solid #d3381c;
    border-left: 3px solid #d3381c;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.58341 17.3211C3.55316 16.2274 3 15 3 13.0103C3 9.51086 5.45651 6.37366 9.03059 4.82318L9.92328 6.20079C6.58804 8.00539 5.93618 10.346 5.67564 11.822C6.21263 11.5443 6.91558 11.4466 7.60471 11.5105C9.40908 11.6778 10.8312 13.159 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0095 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2274 13 15 13 13.0103C13 9.51086 15.4565 6.37366 19.0306 4.82318L19.9233 6.20079C16.588 8.00539 15.9362 10.346 15.6756 11.822C16.2126 11.5443 16.9156 11.4466 17.6047 11.5105C19.4091 11.6778 20.8312 13.159 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0095 14.5834 17.3211Z' fill='%23d3381c'%3E%3C/path%3E%3C/svg%3E");
    background-position: top 35% left 35%;
    background-size: 2em;
    background-repeat: no-repeat;
}

.quote-2::after {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid #d3381c;
    border-right: 3px solid #d3381c;
}

.quote-2 p {
    margin-top: 0;
}

.quote-2 cite {
    display: block;
    color: #737373;
    font-size: .8em;
    text-align: right;
}



/*左上にずらした背景色ありタイトル*/
/*
<div class="box1">
<div class="box-title">ここにタイトルを入力</div>
左上にずらした背景色ありタイトルのボックスです。
</div>
*/
.box1{
	margin: 2em auto; /* ボックスの余白 */
	background-color: #fafafa; /* ボックス背景色 */
	padding:3em 2em 2em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に)*/
	border: 1px solid #0d2569;	/* ボックスの線 (太さ　種類　色)*/
	border-radius: 15px;
}
.box1 .box-title {
	background-color:#0d2569; /* タイトル背景色 */
	font-size: 1.3em;/* タイトル文字の大きさ */
	color: #fff ; /* タイトル文字色 */
	padding: 7px 10px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -15px; /*上から（0px）移動*/
	left: 20px; /*左から(0px)移動*/
	border-radius: 10px;
}

/* BOX */
/*
<div class="box19">
    <p>ここに文章</p>
</div>
*/
.box19 {
    position: relative;
    padding:1em 3em;
}
.box19:before,.box19:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.box19:before{
    border-left: solid 3px #0d2569;
    border-top: solid 3px #0d2569;
    top:0;
    left: 0;
}
.box19:after{
    border-right: solid 3px #0d2569;
    border-bottom: solid 3px #0d2569;
    bottom:0;
    right: 0;
}
.box19 p {
    margin: 0; 
    padding: 0;
	font-family: serif;
	font-size: 1.3em;
}


/* タイムライン（略歴） */
/*
<ul class="timeline">
  <li>
   <p class="timeline-date">●年</p>
    <div class="timeline-content">
      <p>内容</p>
    </div>
  </li>
</ul>

*/
.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

/* for Desktop */
@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    position: relative;
  }
  .timeline li {
    margin: 0!important;
  }
  .timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content {
    width: 80%;
    float: left;
    border-left: 3px #eddfe2 solid;
    padding-left: 30px;
	min-height: 5em;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #0d2569;
    position: absolute;
    left: 106px;
    top: 24px;
    border-radius: 100%;
  }
}


/* レスポンシブテーブル */
.tb01 th,
.tb01 td{
  border: 0;
  background-color: #FFF;
  padding: 10px;
  box-sizing:border-box;
}

.tb01 th {
  border-bottom: solid 2px #0d2569;
  text-align:center;
}

.tb01 td {
  border-bottom: solid 2px #ddd;
}

@media screen and (max-width: 834px) {
  .tb01 {
    width: 100%;
  }

  table.tb01 th{
    border: solid 1px #0d2569;
	background-color: #f3583c;
    color: #FFF;
	text-align: center;
  }
  table.tb01 td{
    border: solid 1px #666;
  }

  table.tb01 th,
  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom:none;
  }

  .tb01 tr:last-child{
    border-bottom: solid 1px #666;
  }
}

/* GoogleMap */
/* Google Mapを囲う要素 */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}
 
/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}













































/* 全体====================================================================== */
#container {
	width: 100%;
}

.content{
	margin-top: 5px;
}

a img:hover {
	opacity: 0.6;
}

.sidebar a:hover,
.navi-in a:hover {
  text-decoration: underline;
  opacity: 0.5;
}

.article h2 {
    border-top: 1px solid #0d2569;
    border-bottom: 1px solid #000039;
    color: #FFF;
    font-size: 1.2em;
    font-weight: 900;
    background: #0d2569;
    background: -moz-linear-gradient(top, #0d2569 0%, #000039 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0d2569), color-stop(100%, #000039));
    background: -webkit-linear-gradient(top, #0d2569 0%, #000039 100%);
    background: -o-linear-gradient(top, #0d2569 0%, #000039 100%);
    background: -ms-linear-gradient(top, #0d2569 0%, #000039 100%);
    background: linear-gradient(to bottom, #0d2569 0%, #000039 100%);
    line-height: 1em;
    padding: 0.5em 0 0.5em 2em;
	margin: 3em 0 1em 0;
}

.article h2:before {
    content: "";
    position: absolute;
    background-color: #FFF;
    width: 0.4em;
    height: 1em;
    left: 1em;
    box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.5);
}

.article h4 {
    border-top: 1px solid #ddd;
    border-left: 10px solid #666;
    border-bottom: 1px solid #a2a2a2;
    border-right: 1px solid #a2a2a2;
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #e0e0e0));
    background: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -ms-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
	font-size: 1.2em;
	padding: 0.4em 0 0.3em 0.5em;
	margin: 2em 0 1em 0;
}

.list-1 li,
.list-1-2 li,
.list-2 li { 
   font-weight: 900;
}

.list-1-2,
.list-2 {
    margin-top: -0.5em !important;
    margin-bottom: 1em !important;
}

.pc-only {
	display: block;
}
.sp-only {
	display: none;
}

.ta-left {
    text-align: left;
}
.ta-right {
	text-align: right;
}
.ta-center {
	text-align: center;
}

.caution-th {
	background-color: #0d2569;
	color: #EEE;
}

.caution-td {
	background-color: #5d75B9;
	color: #EEE;
}

@media (min-width: 834px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
	color: #000;
  }
}

/* ヘッダー====================================================================== */
.logo {
	text-align: left
}

.header-tel {
	position: absolute;
	right: 0;
	top: 8px;
}

.site-name-text-link {
	padding: 0;
}
.logo-image {
    padding-bottom: 0;	
}
#header-in {
	width: 920px;
	margin: 0 auto;
	position: relative;
}


.navi{
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
    box-sizing: border-box;
}

.navi-in {
	width: 100%;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #a2a2a2;
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #e0e0e0));
    background: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -ms-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
}

.navi-in a {
	font-size: 14px;
}
.navi-in > ul li {
	height: 45px;
    line-height: 45px;
}

.navi-in > ul li+ li {
  border-left: 1px solid #CCC;
}

/* サブメニュー */
.sub-menu li {
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 1) inset;
    background: -moz-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #e0e0e0));
    background: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -ms-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
}

.navi-in > ul li:hover > ul > li {
	height: 45px;
}

.navi-in > ul .sub-menu ul {
	top: -45px;
}


/* カラム */
.main {
	padding: 0;
}





/* サイドメニュー====================================================================== */
.sidebar {
	font-size: 12px;
}

.widget_pages ul li {
	border-right: #DDD 1px solid;
	border-bottom: #DDD 1px solid;
	border-left: #DDD 1px solid;
    line-height: 1.3em;
}

.toc-widget-box {
	border: #DDD 1px solid;
}


.widget_pages ul li ul {
    margin: 0;
	padding: 0;
}
.widget_pages ul li ul li {
    border: 0;
	line-height: 0.5em;
}

.widget_pages ul li a {
    padding-left: 1.5em;
	position: relative;
}

.widget_pages ul li ul li a {
    padding-left: 2.5em;
	background: none!important;
	position: relative;
}

.widget_pages ul li ul li ul li a {
    padding-left: 3.5em;
}

.sidebar h2, .sidebar h3 {
    border-top: 1px solid #0d2569;
    border-bottom: 1px solid #000039;
    color: #FFF;
	text-align: center;
    font-size: 1.2em;
    font-weight: 900;
    background: #0d2569;
    background: -moz-linear-gradient(top, #0d2569 0%, #000039 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0d2569), color-stop(100%, #000039));
    background: -webkit-linear-gradient(top, #0d2569 0%, #000039 100%);
    background: -o-linear-gradient(top, #0d2569 0%, #000039 100%);
    background: -ms-linear-gradient(top, #0d2569 0%, #000039 100%);
    background: linear-gradient(to bottom, #0d2569 0%, #000039 100%);
    padding: 5px 0;
	margin: 0;
}

.sidebar .widget-sidebar ul li a {
    background: -moz-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #e0e0e0));
    background: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: -ms-linear-gradient(top, #fff 0%, #e0e0e0 100%);
    background: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
}

.sidebar .widget-sidebar ul li a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    color: #0d2569;
    position: absolute;
    font-size: 1.5em;
    left: 0.5em;
}
.sidebar .widget-sidebar ul li ul li a::before {
    left: 1em;
}

.sidebar .widget-sidebar ul li ul li ul li a::before {
    left: 1.7em;
}

#media_image-2,
#media_image-4,
#media_image-5{
	margin-bottom: 0.8em;
}


/* トップページ====================================================================== */
.index-banner {
	text-align: center;
    border-bottom: 1px solid #DDD;
}

.l-title {
    border-bottom: 1px solid #0d2569;
    font-size: 1.2em;
    font-weight: 900;
    line-height: 1em;
    padding: 0.3em 0 0.3em 1em;
    margin: 2em 0 1em 0;
}

.l-title:before {
    content: "";
    position: absolute;
    background-color: #0d2569;
    width: 0.3em;
    height: 1em;
    left: 0em;
}


/* トップGrid */
#grid_item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}
#grid_item2 {
  grid-column:  1 / 2 ;
  grid-row: 4 / 7;
}
#grid_item3 {
  grid-column: 2 / 3;
  grid-row: 1 / 7;
}
#grid_item4 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
#grid_item5 {
  grid-column: 3 / 4;
  grid-row: 3 / 5;
}
#grid_item6 {
  grid-column: 3 / 4;
  grid-row: 5 / 7;
}

.top-grid-chosei {
	width: 95%;
	line-height: 0;
	margin: 30px auto;
}

.top-grid-container {
  display: grid;
  column-gap: 3px;
  row-gap: 3px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.grid-item img {
   height: 100%;
}

.news_list {
	padding: 0;
	list-style-type: none;
}

.news_list li {
	border-bottom:1px dotted #999999;
}

/* 固定ページ====================================================================== */
.entry-footer .widget_media_image img {
	width: 100%;
}

/* お問い合わせフォーム====================================================================== */
.grecaptcha-badge { visibility: hidden; }

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

/*834px以下*/
@media screen and (max-width: 834px){
    main.main {
		padding-top: 0;
	}

	.article h2 {
		padding: 0.5em 0 0.5em 1.5em;
	}
	.article h2:before {
		left: 1.3em;
	}
	.l-title:before{
		left: 1em;
	}
	.timeline-date {
		font-weight: 900;
	    border-bottom: 1px solid #0d2569;
	}
	#header-in {
		width: 100%;
	}
	.header-tel {
		display: none;
	}

	.top-grid-container {
		display: block;
	}
	.grid-item {
		margin-bottom: 20px;
		text-align: center;
	}
	.grid-item img {
		width: 75%;
		height: auto;
	}
	
    .pc-only {
    	display: none;
    }
    .sp-only {
    	display: block;
    }

	.sub-menu li {
		background:none;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}