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

*, *:before, *:after {
	box-sizing: border-box;
}

/*　　WEBフォント
------------------------------------------------------------------------------------------------------------*/


.gothic {font-family: 'Noto Sans JP', sans-serif; line-height: 1.2em;}
.mincho {font-family: 'Noto Serif JP', serif; line-height: 1.2em;}




/*　　いろいろ見た目
------------------------------------------------------------------------------------------------------------*/

html, body{
	margin:0;
	padding:0;
	border:0;
	font-size: 18px;
	font-family:  'Noto Sans JP', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #333;
	height:100%;
}

@media screen and (max-width: 768px){
html, body{
	font-size: 16px;
}
}


.highlight a:hover *{
	 filter: alpha(opacity=60);
	 -moz-opacity:0.6;
	 opacity:0.6;
	 -webkit-transition: all .3s;
	 transition: all .3s;
	 }
	 
img {
	border: none;
}


.white-back {
	width: 100%;
	position: relative;
    z-index: 1000;
	background: rgba(255,255,255,1.00);
	padding: 100px 0px 0px 0px;
}
	


#contents {
	width: 1100px;
	margin: 10px auto;
	padding: 10px 5px 60px;
	text-align: center;
}


@media screen and (max-width: 1024px){
	

#contents {
	width: 97%;
	text-align: center;
}
}



@media screen and (max-width: 768px){

.white-back {
	width:100%;
	overflow-x: hidden !important;
	padding: 50px 0px 0px 0px;
}

#contents {
	width: 97%;
	text-align: justify;
	margin: 0 auto;
}
}


@media screen and (max-width: 480px){
	
		 
img {
	width: 100%;
}

}



a:link {color: #333;}
a:visited {color: #333;}
a:hover {color: #838B0D;}
a:active {color: #C36;}


.cb{
	/* floatを解除 */
	clear: both;
}




/*　　PCのみ表示、スマホのみ表示の切り替え
------------------------------------------------------------------------------------------------------------*/

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

@media screen and (max-width: 640px) {
.pc {display:none;}
.sp {display:block;}
	}







/*　　h
------------------------------------------------------------------------------------------------------------*/


h1 {
	width:100%;
	margin: 0;
	background-color: #4D9753;
	font-size: 14px;
	font-weight: normal;
	color: #FFF;
	text-align: center;
	position: absolute;
	z-index: 100;
}

h1 br{
		display: none;
}


h2 {
	font-family: 'Noto Serif JP', serif;
	line-height: 1.5em;
	font-size: 36px;
	background-image: url("../img/youtube_icon.png");
	background-position: center;
	background-repeat: no-repeat;
	
	background-color:rgba(255,255,255,0.7);  /* 背景画像を薄く（白ベタを透明度で重ねる） */
	background-blend-mode:lighten;           /* 背景画像を薄く2（少し明るく） */
	
	height: 200px;
	padding-top: 45px;
}
 

h3 {
	font-family: 'Noto Sans JP', serif; line-height: 1.2em;
	font-size: 30px;
	font-weight: 700;
}





h4 {
     text-align: center;
	margin: 50px auto;
	font-size: 30px;
	letter-spacing: 0.1em;
}
 
h4 span{
     position: relative;
     display: inline-block;
	padding-left: .5em;
	padding-right: .5em;
     padding-bottom: .5em;
     border-bottom: 1px solid black;
}
      
h4 span::before,
h4 span::after {
     position: absolute;
     top: 100%;
     left:50%;
     transform:translateX(-50%);
     content: '';
     border: 10px solid transparent;
}
 
h4 span::before {
     border-top: 10px solid black;
}
 
h4 span::after {
     margin-top: -1px;
     border-top: 10px solid white;
}






@media screen and (max-width: 1024px)
and (max-width: 768px)
and (max-width: 480px){
	
h1 br{
		display: block;
}

h2 {
	font-size: 22px;
	text-align: justify;
	background-image: url("../img/youtube_icon_sp.png");
	background-position: center;
	background-repeat: no-repeat;
	
	background-color:rgba(255,255,255,0.8);  /* 背景画像を薄く（白ベタを透明度で重ねる） */
	background-blend-mode:lighten;           /* 背景画像を薄く2（少し明るく） */
	
	height: 130px;
	padding-top: 0px;
	}

h3 {
	font-size: 20px;
	text-align: justify;
	}
	
h4 {
	font-size: 24px;
}
	
}



/*　　区切り線デザイン
------------------------------------------------------------------------------------------------------------*/


.gradation {
	position: relative;
	height: 1px;
	border-width: 0;
	background-image: -webkit-linear-gradient(left, transparent 0%, #283593 50%, transparent 100%);
	background-image:         linear-gradient(90deg, transparent 0%, #283593 50%, transparent 100%);
}






/*　　フォント
------------------------------------------------------------------------------------------------------------*/

.tx10 {font-size: 10px;}
.tx11 {font-size: 11px;}
.tx12 {font-size: 12px;}
.tx13 {font-size: 13px;}
.tx14 {font-size: 14px;}
.tx15 {font-size: 15px;}
.tx16 {font-size: 16px;}
.tx17 {font-size: 17px;}
.tx18 {font-size: 18px;}
.tx20 {font-size: 20px;}
.tx22 {font-size: 22px;}
.tx24 {font-size: 24px;}
.tx26 {font-size: 26px;}
.tx28 {font-size: 28px;}
.tx30 {font-size: 30px;}
.tx32 {font-size: 32px;}
.tx36 {font-size: 36px;}
.tx40 {font-size: 40px;}
.tx50 {font-size: 50px;}
.tx60 {font-size: 60px;}

.red {color: #C30;}
.blue {color: #336699;}
.green {color: #696;}
.orange {color: #F90;}
.pink {color:#FF6699;}
.brown {color: #624628;}
.gray {color: #999;}
.white {color: #FFF;}
.black {color: #333;}


.lh_s {line-height:1.2em;}


.underline {
  background: linear-gradient(transparent 60%, rgba(255,153,171,0.60) 60%);
}


.price {
	font-size: 26px;
	color: #F00;
	font-family: 'Noto Serif JP', serif; line-height: 1.2em;
	text-align: center;
}


.min-red {
	font-size: 26px;
	color: #F00;
	font-family: 'Noto Serif JP', serif; line-height: 1.2em;
	text-align: center;
}

 
@media screen and (max-width: 640px) {
	
.min-red {
	font-size: 20px;
}

}







/*　　ヘッダYoutube
------------------------------------------------------------------------------------------------------------*/


#header {
	height: 900px;
	overflow: hidden;
}

.header_area {
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 60px;
	line-height: 1.5em;
	font-weight: 900;
	color: white;
	text-align: center;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
}


.tx-s {
	font-size: 90%;
}


#header::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: url("../img/dots.png");
}

 
/* スマートフォンの設定 */


@media screen and (max-width: 768px){
	
	#tubular-container iframe {
		height: 300px !important;
	}
 
    #tubular-container {
		width: 100% !important;
		height: 300px !important;
    }
	
	#tubular-shield {
		width: 100% !important;
		height: 300px !important;
    }
 
    #header{
		height: 300px !important;
		width: 100%;
    }
	
	.header_area {
		width: 100%;
	font-size: 30px;
}
	

	
}





/*　　テーブル　2列
------------------------------------------------------------------------------------------------------------*/


.tbl2 {
	width: 920px;
	margin: 10px auto;
}



.tbl2 th {
	width: 50%;
	padding: 10px;
	font-weight: normal;
}

.tbl2 td {
	padding: 10px;
}


 

@media screen and (max-width: 640px) {
	
.tbl2 {
    width: 98%;
  }
.tbl2 th,
.tbl2 td {
    display: block;
    width: 100%;
	  text-align: center;
  }

	
.tbl2 th img,
.tbl2 td img{
	max-width: 100%;
}
}
 










/*　　プラン部分
------------------------------------------------------------------------------------------------------------*/


.plan_ttl {
	font-size: 20px;
	font-weight: bold;
	width: 100%;
	padding: 5px;
	background-color: rgba(150,199,130,1.00);
	border-radius: 10px 10px 0px 0px;
}


.plan_tx {
	width: 100%;
	padding: 10px 20px;
	border: 2px solid rgba(150,199,130,1.00);
	border-radius: 0px 0px 10px 10px;
	letter-spacing: 0;
}

.plan_price {
	font-size: 30px;
	font-weight: bold;
	font-family: 'Noto Serif JP', serif; line-height: 1.2em;
	color: rgba(227,0,3,1.00);
	margin: 10px 0px 0px 0px;
}

.plan_price span{
	font-size: 16px;
}








/*　　4列 レスポンシブ
------------------------------------------------------------------------------------------------------------*/


.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	margin: 30px auto;
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 50%;
	}
}









/*　Youtubeレスポンシブ
------------------------------------------------------------------------------------------------------------*/

.movie-width {
	width: 90%;
	margin: 5px auto;
}



.movie-width-tbl {
	width: 100%;
	margin: 5px auto;
}



.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: -1px;
	width: 100%;
	height: 100%;
}



@media screen and (max-width: 960px){
.movie-width {
	width: 100%;
	margin: 5px auto;
}

.movie-width-tbl {
	width: 100%;
	margin: 5px auto;
}
}







/*　Youtube中央にひとつ
------------------------------------------------------------------------------------------------------------*/

.youtube-center {
	width: 70%;
	margin: 5px auto;
}


@media screen and (max-width: 960px){
.youtube-center {
	width: 100%;
	margin: 5px auto;
}

}








/*　チェックリスト装飾
------------------------------------------------------------------------------------------------------------*/


.check {
    width: 600px;
	border: 10px solid #fcf0f1;	/* 内側の線の太さ・種類・色 */
	margin: 10px auto; /* 外側の余白 */
	padding: 10px; /* 内側の余白 */
	position: relative;
	z-index: 0;
	text-align: left;
	font-size: 30px;
	line-height: 1.5em;
	font-weight: 500;
}

.check:before {
	border: 1px solid #f5d5da;	/* 外側の線の太さ・種類・色 */
	content: '';
	display: block;
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: -10px;
	right: -10px;
	z-index: -1;
}



.illust {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -100;
}



.check ul{
  position: relative;
    padding-left: 2em;
}


.check ul li{
  line-height: 1.5em;
  padding: 0.5em 0;
  list-style-type: none !important;/*ポチ消す*/
}

.check ul li:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f00c";
  position: absolute;
  left : .5em; /*左端からのアイコンまで*/
  color: #F03849; /*アイコン色*/
}




@media screen and (max-width: 768px){
.check {
	width: 100%;
	font-size: 18px;
    padding: 0px;
}
    

.check ul{
    padding-top: 0px;
    padding-bottom: 0px;
}
    

.check ul li{
  line-height: 1.5em;
  padding: 0.5em 0;
  list-style-type: none !important;/*ポチ消す*/
}


.check img{
    width: 60%;
}
    

.illust {
    position: absolute;
    right: -50px;
}

}
	
	







/*　チェックリスト装飾 （用意して頂く物）
------------------------------------------------------------------------------------------------------------*/


.check_b {
    width: 800px;
	border: 10px solid #FCF7F0;	/* 内側の線の太さ・種類・色 */
	margin: 50px auto; /* 外側の余白 */
	padding: 10px; /* 内側の余白 */
	position: relative;
	z-index: 0;
	text-align: left;
	font-size: 16px;
	line-height: 1.5em;
	font-weight: 500;
}

.check_b_ttl {
	width: 100%;
	background: rgba(255,233,188,0.5);
	text-align: center;
	padding: 5px;
	font-size: 20px;
}

.check_b:before {
	border: 1px solid #F8E4CA;	/* 外側の線の太さ・種類・色 */
	content: '';
	display: block;
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: -10px;
	right: -10px;
	z-index: -1;
}



.check_b ul{
  position: relative;
    padding-left: 2em;
}


.check_b ul li{
  line-height: 1.5em;
  padding: 0.5em 0;
  list-style-type: none !important;/*ポチ消す*/
	font-size: 18px;
}



.check_b ul li:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f044";
  position: absolute;
  left : .5em; /*左端からのアイコンまで*/
  color: #F03849; /*アイコン色*/
}

.check_b ul li span{
	font-size: 80%;
	line-height: 1.2em !important;
}


.check_b ul li p{
	font-size: 80%;
	margin-top: 0;
	margin-bottom: 3px;
	line-height: 1.2em;
}





.check_b ol{
  position: relative;
    padding-left: 1.8em;
	padding-right: 0;
}

.check_b ol li{
  line-height: 1.5em;
  padding: 0.5em 0;
}


.check_b ol li p{
	font-size: 80%;
	margin-top: 0;
	margin-bottom: 3px;
	line-height: 1.2em;
}





@media screen and (max-width: 768px){
.check_b {
	width: 100%;
	font-size: 18px;
    padding: 0px;
}
    

.check_b ul{
    padding-top: 0px;
    padding-bottom: 0px;
}
    

.check_b ul li{
  line-height: 1.5em;
  padding: 0.5em 0;
  list-style-type: none !important;/*ポチ消す*/
}

	
.check_b ol{
	margin: 0px 10px 0px 0px;
}
	
.check_b ol li{
  line-height: 1.5em;
  padding: 0.5em 0;
}

}
	
	





/*　　アニメーションボタン
------------------------------------------------------------------------------------------------------------*/


.animation-btn {
  display: inline-block;
  width: 80%;
  text-align: center;
  font-size: 18px;
  color: #fff !important;

  font-weight: bold;
  text-decoration: none;
  line-height: 1.2em;
  
  text-shadow:1px 1px 2px #7C0404, 0px 0px 2px #7C0404, 0px 0px 1px #7C0404;
  
  background: #FFDDDD; /* Old browsers */
  background: -moz-linear-gradient(top,  #FFDDDD 0%, #FFA7A7 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #FFDDDD 0%,#FFA7A7 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #FFDDDD 0%,#FFA7A7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFDDDD', endColorstr='#FFA7A7',GradientType=0 ); /* IE6-9 */

  
  /*   border: 2px solid #838B0D;   */
  border-radius: 10px;
  
  padding: 20px;
  margin: 50px auto 10px;
  position: relative;
}

.animation-btn span {
  position: relative;
  z-index: 1;
}

.animation-btn::before,
.animation-btn::after {
  content: "";
  display: block;
  
  background: #DF5858; /* Old browsers */
  background: -moz-linear-gradient(top,  #DF5858 0%, #CB2626 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #DF5858 0%,#CB2626 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #DF5858 0%,#CB2626 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DF5858', endColorstr='#CB2626',GradientType=0 ); /* IE6-9 */
  
  width: 51%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: .3s;
}

.animation-btn::before {
  left: 0;
	border-radius: 10px 0px 0px 10px; 
}
.animation-btn::after {
  right: 0;
	border-radius: 0px 10px 10px 0px; 
}

.animation-btn:hover:before,
.animation-btn:hover:after {
  width: 0;
  background-color: #fff;
}

.animation-btn:hover {
  color: #CB2626 !important;
  text-shadow:1px 1px 2px #fff, 0px 0px 2px #fff, 0px 0px 1px #fff;
}




@media screen and (max-width: 960px)
and (max-width: 480px){
	.animation-btn { width: 95%; }
	
	
}







/*　　フッター
------------------------------------------------------------------------------------------------------------*/


.info {
	text-align: center;
	margin: 0px auto;
	font-size: 16px;
	line-height: 1.5em;
	padding: 20px 0px;
	background-color: #CCDFCD;
}


.info p{
	font-size: 26px;
	font-family: 'Noto Serif JP', serif;
	line-height: 1.2em;
}	


.info p span{
	font-size: 14px;
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.2em;
}

.footer{
	margin: 0px auto;
	padding: 20px 0px;
	background-color: #4D9753;
	font-size: 14px;
	font-weight: normal;
	color: #FFF;
	text-align: center;
}


.info img{
	width: 20%;
}


@media screen and (max-width: 960px)
and (max-width: 480px){
	
.info {
	font-size: 14px;
}

.info p{
	font-size: 22px;
	font-weight: bold;
}	

.info p span{
	font-weight: normal;
}

.info img{
	width: 50%;
}

.footer {
	font-size: 12px;
	letter-spacing: 0.05em;
}
}








/*　　メールフォーム
------------------------------------------------------------------------------------------------------------*/


.txbox {
	width: 85%;
	margin: 0px auto 30px;
}

 
 
 form { margin: 0px auto 50px; }
 
.contact {
  border-collapse: collapse;
  width: 690px;
  margin: 10px auto 20px;
  font-size: 18px;
}
 
.contact tr {
  border-bottom: 1px solid #dbe1e8;
}
.contact tr:first-child {
  border-top: 1px solid #dbe1e8;  
}
 
.contact th,
.contact td {
  padding: 10px;
  display: inline-block;
}
 
.contact th {
  text-align: right;
  width: 250px;
}

.contact td {
  text-align: left;
  width: 400px;
}
 
.contact input[type='text'],
.contact textarea {
  width: 70%;
  font-size: 18px;
}

.contact textarea {
  height: 100px;
}

.contact select {
  font-size: 18px;
}

input#submit_button {
  font-size: 18px;
}



input::placeholder {
  color: #CCC;
}

/* IE */
input:-ms-input-placeholder {
  color: #CCC;
}

/* Edge */
input::-ms-input-placeholder {
  color: #CCC;
}
 

textarea::placeholder {
  color: #CCC;
}


.caution {
	width: 690px;
	margin: -15px auto 0px;
	line-height: 1.2em;
}




@media only screen and (max-width: 768px) {
	
.txbox {
	width: 95%;
	margin: 0px auto 30px;
}

.contact { width: 97%;}
 
	
  .contact tr,
  .contact th,
  .contact td {
    display: block;
    width: 97%;
  }
  
  .contact th {
    padding-bottom: 0;
	text-align: left;
  }
  
  .contact input[type='text'],
  .contact textarea {
    width: 97%;
  }
	

.caution {
	width: 95%;
	text-align: left;
}
	
}









/*　　特定商 
------------------------------------------------------------------------------------------------------------*/



/*全体*/
.guide_bt {
    margin: 2em 0;
    padding: 0;
	text-align: center;
}

/*ボタン装飾*/
.guide_bt label {
    padding: 5px 15px;
    font-weight: normal;
	font-size: 14px;
    background: #efefef;
    border-radius: 5px;
    cursor :pointer;
    transition: .5s;
}

/*アイコンを表示*/
.guide_bt label:before {
    display: inline-block;
    content: '\f078';
    font-family: 'FontAwesome';
    padding-right: 5px;
    transition: 0.2s;
}

/*ボタンホバー時*/
.guide_bt label:hover {
    background: silver;
}

/*アイコンを切り替え*/
.guide_bt input:checked + label:before {
     content: '\f00d';
     -ms-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #668ad8;
}



/*チェックは見えなくする*/
.guide_bt input {
    display: none;
}




 
/*   特定商 テーブル装飾   */

.guide {
	width: 750px;
	margin: 30px auto;
	font-size: 14px;
}

.guide th,
.guide td {
	border: 1px solid #ccc;
	padding: 10px;
}

.guide th {
	background-color: #dedede;
	font-weight: normal;
}

.guide td {
	text-align: left;
}



@media screen and (max-width: 767px) {
.guide { width: 97%;}
.guide,
.guide tr,
.guide td,
.guide th {display:block;}
.guide th {width:auto;}
}