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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*ヘッダーロゴ設定*/
.header-container-in.hlt-top-menu .logo-image {
padding: 30px 0px 10px 40px;
}
/*文字のマージン設定*/
.article p{
	margin-bottom:1.2em;
}
/*メインh1テキスト*/
.maintext {
	font-size:44px;
	padding: 30px 0 0 0;
}
/*サブメインテキスト*/
.submaintext {
	text-align: center;
	font-size:18px;
	color:#fff;
}
/*メインh2タイトル設定*/
.article h2.top-type{
	font-size:36px;
	color:#42a5d6;
	margin-bottom:1em;
	background:none;
	text-align: center;
	font-weight:1000;
	padding:15px;
	border:none;
}
/*h2タイトル設定*/
.article h2{
	font-size:30px;
	color:#42a5d6;
	margin-top:1em;
	margin-bottom:0.5em;
	padding:15px;
	background:#ffffff;
	text-align: center;
	font-weight:1000;
	border:double 7px #42a5d6;
}
.h2-sp {
	display: none;
}
/*h3タイトル設定*/
.article h3{
	font-size:28px;
	color:#42a5d6;
	margin-top:1em;
	margin-bottom:1em;
	border:none;
	text-align: center;
	font-weight:1000;
	padding-bottom:0px;
}
.h3-sp {
	display: none;
}
/*提供プランの文字マージン設定*/
.article p{
	margin-bottom:1.2em;
}
.article p.teikyou{
	margin-bottom:0.3em;
}
/*コンテンツの幅*/
:root{
	--wp--style--global--content-size:1020px;
}
/*メイン背景カラー設定*/
#main {
  background-color: #DEF1FD;
}
/*画像ホバー設定*/
.image_link{
  display:block;
}
.image_link img{
  transition:0.3s;
  display:block;
  width:100%;
}
.image_link:hover img{
  opacity:0.8;
}

/*セクション設定*/
.change-area {
    background: #42A5D6;
	margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
	padding-bottom: 40px;
}
.change-area2 {
    background: #DEF1FD;
	margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
	padding-top: 5px;
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
	padding-bottom: 10px;
}
.change-area3 {
    background: #fff;
	margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
	padding-top: 40px;
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
	padding-bottom: 40px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

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

/*834px以下*/
@media screen and (max-width: 834px){
    .pc { display: none !important; }
    .sp { display: block !important; }
.header-container-in.hlt-top-menu .logo-image {
	padding: 30px 0px 0 0;
}
.maintext {
	font-size:34px;
	text-align: center;
	padding: 0;
}
.submaintext {
	text-align: left;
	font-size:16px;
}
	.container .column-wrap{
	gap:0;	
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
/*h2タイトル設定*/
.article h2{
	font-size:28px;
	padding:10;
}

.h2-pc {
	display: none;
}
.h2-sp {
	display: inline;
}
/*h3タイトル設定*/
.h3-pc {
	display: none;
}
.h3-sp {
	display: inline;
}
}