@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*▼　テーブルの背景透過 2025/9/25*/
table tr:nth-of-type(2n+1){
	background-color: transparent;
}

html{
	scroll-behavior:smooth;
}

#container #header-container{
  background:#fff;
}
#container #header-container .navi{
  background:#fff;
}
#container #navi .navi-in a{
  color:#333;
}
#container #footer{
  background:#fff;
}
#container #footer a:not(.sns-button),#container .copyright{
    color: #333;
}
.footer-mobile h3{
  color:#333;
}



.scrollbox{
	overflow-x: scroll;
}
.scrollbox table {
	margin: 0 0 5px 0;
    table-layout: fixed;
    max-width: 200%;
	width: 195%;
	border: solid 5px #012c2d;
}
.scrollbox table tr{
	border: solid 1px #222;
}
.scrollbox table tr th{
	padding: 6px;
	font-size: 12px;
	color: #fff !important;
	text-align: center;
	line-height:1.3;
	background: #008f87 !important;
	border: dashed 1px #222;
}
.scrollbox table tr td{
	padding:6px 6px 10px 6px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
	border: dashed 1px #222;
	background: #faf9d9 !important;
}
.scrollbox table tr:nth-child(3){
	background:#f6f6f6;
}
.scrollbox table tr td img{
	width: 100px;
}
.scrollbox table tr td a{
	font-size: 12px;
	font-weight: bold;
	color: #256edb;
}
.scrollbox table tr td.back_g{
	background: #e2f6f1;	
}
.scrollbox .fixed01 {
    position: sticky;
    left: 3px;
	width: 15%;
    z-index: 1;
}
.scrollbox .fixed01::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -4px;
    width: 100%;
    height: 100%;
	border-top: 1px solid #012c2d;
	border-right: 1px solid #012c2d;
	border-bottom: 1px solid #012c2d;
    border-left: 5px solid #012c2d;
	z-index: -1;
}
.symbol-01{
	background: url(https://jscs37.jp/wp-content/uploads/2025/02/1-png.webp) no-repeat center / 32px;
	width: 32px;
	height: 32px;
	margin: 1vw auto;
}.symbol-02{
	background: url(https://jscs37.jp/wp-content/uploads/2025/02/2-png.webp) no-repeat center / 32px;
	width: 32px;
	height: 32px;
	margin: 1vw auto;
}
.symbol-03{
	background: url(https://jscs37.jp/wp-content/uploads/2025/02/3-png.webp) no-repeat center / 32px;
	width: 32px;
	height: 32px;
	margin: 1vw auto;
}


.spec {
	width: 75%;
    margin: 0px auto 1.4em;
    padding: 15px;
    border-radius: 5px;
	border: solid 1px #ccc;
    background: #fff
}
.spec_name {
    text-align: center;
}
.spec_name p {
	margin: 0 0 10px 0 ;
    font-size: 22px;
    font-weight: 700;
	line-height:1.4;
}
.spec_name p a {
}
.spec_thumbnail img {
    display: block
}
.fee {
    display: flex;
    margin: 10px 0 5px;
    justify-content: space-between
}
.fee__money {
    width: 49%;
    text-align: center;
	vertical-align: middle;
}
.fee__money-cash {
    border-radius: 5px 5px 0 0;
    background: #008f87;
}
.fee__money-cash p {
	margin: 0;
	padding: 6px 0;
    color: #fff;
    font-size: 16px;
	font-weight: bold;
	line-height:1.4;
}
.fee__money-en {
	position: relative;
    border: solid 1px #008f87;
    border-radius: 0 0 5px 5px;
    border-top: none;
	text-align: center;
	vertical-align: middle;
}
.fee__money-en .text-box{width: 100%;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.fee__money-en p {
	margin: auto;
	padding: 0 1px;
    color: #373737;
    font-size: 15px;
    font-weight: 700;
	line-height:1.4;
	text-align: center;
	vertical-align: middle;
}
table.spectable {
    width: 100%;
    margin: 5px 0 10px;
    border: none;
    border-collapse: separate;
    border-spacing: 0 5px;
    font-size: 14px
}
.spectable th {
    width: 130px;
    padding: 5px 0;
    border: solid 2px #7eb7b4;
    border-radius: 5px 0 0 5px;
    background: #7eb7b4;
	color: #fff;
	font-size: 14px;
    font-weight: bold;
}
.spectable td {
    padding: 5px 7px;
    border: solid 1px #7eb7b4;
    border-radius: 0 5px 5px 0;
	font-size: 16px;
    font-weight: bold;
}
.official-link {
	margin: 10px auto;
    position: relative;
    overflow: hidden;
    text-align: center
}
.official-link::after {
    position: absolute;
    top: -180px;
    left: 0;
    opacity: 0;
    width: 30px;
    height: 100%;
    background: #fff;
    transform: rotate(45deg);
    -webkit-animation: shine 3s ease-in-out infinite;
    animation: shine 3s ease-in-out infinite;
    content: " "
}
.official-link p {
	margin: 0;
    font-size: 16px;
    font-weight: 700;
    font-family: 'M PLUS Rounded 1c',sans-serif;
    line-height: 1.3
}
.official-link p a {
    display: block;
    padding: 10px 0;
    border: solid 1px #de3220;
	border-radius: 100px;
    background: #ff503e;
    color: #fff;
    text-decoration: none
}


/*article_selectionbox*/
.selectionbox{
	overflow-x: scroll;
}
.selectionbox table {
    table-layout: fixed;
    max-width: 300%;
	width: 115%;
}
.selectionbox table th{
	padding: 5px;
	font-size: .8em;
}
	.selectionbox table th:nth-child(1){
		width: 12%
	}
.selectionbox table td{
	padding: 10px;
	background: #fff;
	text-align: center;
}
.selectionbox .fixed01 {
    position: sticky;
    left: 0px;
    z-index: 1;
	line-height:1.4;
}
.selectionbox .fixed01::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: solid 1px #79c4c0;
	background:#e5f4f3;
	z-index: -1;
}


.example_title{
	position:relative;
	margin:0;
	padding:7px 5px 7px 10px;
	color:#fff;
	font-weight:bold;
	text-align:center;
	background:#00524d;
}
.example_title img{
	position:absolute;
	right:0;
	bottom:0;
	width:3.2em;
}
.example_plan{
	margin:0;
	padding:10px 0;
	text-align:center;
	background:#eef8f0;
	border-right:solid 2px #00524d;
	border-left:solid 2px #00524d;
	
}
.example_plan p{
	margin:0;
	font-weight:bolder;
	text-shadow:
       2px 2px 0 #fff,
     -1px -1px 0 #fff,  
      1px -1px 0 #fff,
      -1px 1px 0 #fff,
       1px 1px 0 #fff;
	line-height:1.4;
}
.example_plan p:nth-child(1){
	font-size:1.6em;
}
.example_plan p:nth-child(2){
	font-size:1em;
}
.example_box{
	padding:15px 10px 0 10px;
	border-right:solid 2px #00524d;
	border-bottom:solid 2px #00524d;
	border-left:solid 2px #00524d;
}
.example_img{
	display: flex;
	justify-content: space-between;
}
.example_arrow {
	margin: auto;
	background: #737373;
	height: calc(tan(60deg) * 40px / 2);
	width: 20px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.example_img--bf,.example_img--af{
		width: 45%
}
.example_img--bf img,.example_img--af img{
	width: 100%;
	vertical-align: bottom;
	border: solid 2px #008f87;
}
.example_img--bf p,.example_img--af p{
	margin:0;
	color:#fff;
	font-weight:bold;
	text-align: center;
	background: #008f87;
}
.example_detail{
	position: relative;
	margin:15px 0;
	padding:10px 10px 10px 20px;
	background:#f4f4f4;
}
.example_detail::before{
	content: "＋";
	position: absolute;
	right: 20px;
	font-weight:bold;
}
.example_detail.active::before{
	content: "－";
}
.example_table{
	display:none;
}
.example_table tr th{
	width:30%;
	padding:6px;
	line-height:1.5;
	background:#f5f6f7;
}
.example_table tr td{
	padding:6px;
	line-height:1.5;
	background:#fff;
}

a .appbtn{
	color:#fff;
	font-weight:bold;
	
}
.appbtn{
	margin: 0 0 2em 0;
	padding:.9em .8em;
	text-align: center;
	line-height:1.3;
	border: solid 1px #de3220;
	box-shadow: 0 2px #de3220;
	border-radius: 50vw;
	background: #ff503e;
}
.scrollbox table tr td:nth-child(8) a .appbtn{
	margin:0;
}

.article .entry-content h3 {
	border-top: none;
    border-right: none;
    border-bottom: 3px solid var(--cocoon-thin-color);
	border-bottom: 3px solid var(--cocoon-thin-color);
	border-left: none;
}
.article .entry-content h4 {
	border-top: none;
    border-bottom: 1px solid var(--cocoon-thin-color);
}

.table_minibtn {
    position: relative;
    overflow: hidden;
	margin: 0 .1em;
    padding: .5em;
    font-size: .9em;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
	text-align:center;
    text-shadow: 0 .1em 0 #B95A04;
    box-sizing: border-box;
    border: 1px solid #B95A04;
    border-radius: 5px;
    box-shadow: 0 .08em 0 rgba(142, 63, 10, .75);
    background: #FF503E;
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.scrollbox table{
		table-layout: fixed;
		max-width: 310%;
		width: 300%;
	}
	.scrollbox .fixed01 {
		position: sticky;
		left: 1px;
		width: 10%;
		z-index: 1;
	}
	.scrollbox table tr td a img {
		width: 80%;
		margin: auto;
	}
	.spec {
		width: 100%;
		margin: 0 0 1.4em 0;
		padding: 10px;
		border-radius: 5px;
		border: solid 1px #ccc;
		background: #fff
	}	
	
	.selectionbox table {
    	table-layout: fixed;
		max-width: 300%;
		width: 240%;
	}
	.selectionbox table th:nth-child(1){
		width: 13%;
	}
	.selectionbox table th:nth-child(2){
		width: 17%;
	}
	.selectionbox table th:nth-child(3){
		width: 17%;
	}
	.selectionbox table th:nth-child(4){
		width: 18%;
	}
	.selectionbox table th:nth-child(5){
		width: 13%;
	}
	.selectionbox table th:nth-child(6) {
		width: 14%;
	}
	.selectionbox table td p{
		margin: 0;
		line-height: 1.3;
	}
	.example_title{
		text-align:left;
	}
	.article .entry-content h2 {
	margin: 0 -15px 1.26em;
	}

}


/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/*362px以下*/
@media screen and (max-width: 361px){
  /*必要ならばここにコードを書く*/
	.spec {
        padding: 10px 6px;
    }
}