/*@charset "UTF-8"*/
/*@charset "UTF-8" これ外すと、かわいいフォント『'Montserrat', sans-serif;』効く 　『』とりあえず、お守り*/
/*ロング用'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Helvetica, Arial, 'ＭＳ Ｐゴシック',"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ"*/
/*『#』をid、『.』をclass*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


*{padding: 0;/*アイコンフォームはここだけ*/
	margin: 0;
	font-family: 'Montserrat', sans-serif;}


*{box-sizing:border-box;}
	/*画面のフレキシブル効果*/

*{padding: 0;
		margin: 0;
		box-sizing: border-box;
		list-style: none;/*追加　text-decoration: none;*/
		text-decoration: none;/* 文字周りの、アンダー線とか、無しに　*/
		font-family: 'Montserrat', sans-serif;}

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

/* オーダー前置き */
/*☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆🔵🔵🔵🔵🔵 ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ */
/*☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆🔵🔵🔵🔵🔵 ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ */
body{background-color: #F5F5F5;}
.asis
{text-align: center;}
.proH
{font-size: 2.2rem;
 color: #004F2E;
 text-align: center;
 margin-bottom: 35px;}

.ToBe
{max-width: 1150px;/*1250px でもいい。*/
 width: 100%;
 padding: 10px;
 margin: 0 auto;}

.FourBox
{display: flex;
 flex-wrap: wrap;
 justify-content: space-around;}

.FourBox li
{width: 555px;
 padding: 0px 0px 19px 0px;/*上、右、下、左*/
 margin: 0px 5px 16px 5px;}
 /*background-color: #DDEEFF;　薄い青色*/

p.article
{font-size: 1.25rem;
 line-height: 1.5em;
 margin-top: 9px;}

img.lighting
{transition: filter 0.2s ease;
 filter: brightness(1.0);} /* デフォルト値なのでこの一行は省略してもOK */

img.lighting:hover
{filter: brightness(1.10);} /* 明るくする */

section.trou
{padding: 0px 36px 0px 36px;}/*上、右、下、左*/

.proH2
{font-size: 2.2rem;
 color: #004F2E;
 text-align: center;
 padding: 108px 0px 25px 0px;}/*上、右、下、左*/

.SlideBox
{display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;}

p.treatise/*論文*/
{font-size: 1.2rem;
 padding-bottom: 10px;}

li.writing/*書き込み*/
{width: 50%;
 font-size: 1.25rem;
 line-height: 1.5em;
 margin-bottom: 150px;
 padding-left: 2rem;}
/*background-color: #DDEEFF;　薄い青色*/

li.worth/*価値*/
{width: 555px;
 height: auto;
 padding-right: 2rem;}

.pricels
{display: flex;
 flex-wrap: wrap;
 justify-content: space-between;/*justify-content: space-between;*/
 font-size: 1.5rem;
 color: #004F2E;
 line-height: 1.8em;
 padding: 0px 0px 0px 0px;/*上、右、下、左　（記入欄、余白）*/
 margin-top: 109px;}/*左側の、margin-bottom: 150px;と引き算（余白ある）*/
/*background-color: #DDEEFF;　薄い青色*/
.pricels-right
{text-align: right;}


@media(max-width: 1195px)/* 1190px 良い数字*/
{.FourBox
	{justify-content: space-evenly;}
.FourBox li
{width: 468px;
	padding: 0px 0px 19px 0px;}/*上、右、下、左*/

li.writing
{width: 90%;
	margin-bottom: 27px;}

section.trou
{padding: 0px 66px 30px 66px;}/*上、右、下、左*/

.SlideBox
{display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}

li.worth
{margin: 0 0 0 auto;}/*上、右、下、左　　※下段価格表の、右寄せ*/
.pricels
{margin-top: 0px;}}


@media(max-width: 848px)/*768px以下*/
{.proH
	{font-size: 1.8rem;
		margin-bottom: 15px;}

.FourBox li
{width: 468px;
	padding: 0px 0px 19px 0px;/*上、右、下、左*/
	margin: 10px;}}






/* 完全に後半 */
/*☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆🔵🔵🔵🔵🔵 ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ */
/*☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆🔵🔵🔵🔵🔵 ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ ☑️ ◆ ✔️ */
/*CSS本編　フォーム側*/
.Forma/*Forma『形』*/
{width: 100%;/*省いた、height: 100vh;*/
	height: 100%;
 display: grid;
 place-items: center;
 background-color: #F5F5F5;}/*うすいグレー　背景メイン色*/

h1.identia
{padding: 105px 0px 35px 0px;/*上、右、下、左*/
 color: #004F2E;}/*ハンターグリーン#00633A*/

.FormaBG
{display: grid;
 grid-template-columns: 380px 620px;/*右幅、左幅*/
 grid-auto-rows: 1150px;/*縦幅*/
 background-color: #BEEDBE;/*うすい緑　メイングリーン　#BEEDBE　#BCEBBC*/
 column-gap: 20px;}/*左右ブロック間の、微妙な幅*/

.Enter
{width: 88%;/*メイン記入バーの長さ*/
 margin: 72px 0px 0px 35px;/*上、右、下、左*//*上は間隔、左だけでいいかも*/
 position: relative;}
 	/*いらないかも　position: relative;*/

h2.agre
{position: absolute;
 background-color: #F8F8FF;
 margin-left: 28px;/*h2の位置、margin系*/
 margin-top: -34px;
 padding: 7px 19px;/*上下、左右　　h2の余白*/
 font-size: 1.3rem;/*h2のfont-size:　効いてる*/
 border: 3px #009090 solid;
 border-radius: 7px;
 color: #004F2E;}

.Easy
{display: flex;/*いらないかも??*/
 background-color: #008080;/*濃いめ青緑*/
 border-radius: 10px;
 padding: 3px;/*いわゆる、線の太さ*/
 text-decoration: none;}

.Easy:hover
{display: flex;/*いらないかも??*/
 background: linear-gradient(155deg, #6BB373, #A0E080, #73BF7C, #44A04F);
 /*linear-gradient(155deg, #6BB373, #A0E080, #73BF7C, #44A04F);*/
 /*(155deg左上開始, #CF000A左上色, #A0E080, #66AAEE, #000000右下色)5;*/
 border-radius: 10px;
 padding: 3px;/*いわゆる、線の太さ*/
 text-decoration: none;}

.Easy input
{background: #FFFFFF;
 padding: 33px 11px 15px 25px;/*上、右、下、左　（記入欄、余白）*/
 border-radius: 10px;}

.Easy textarea
{background: #FFFFFF;
 padding: 33px 11px 15px 25px;/*上、右、下、左　（記入欄、余白）*/
 border-radius: 10px;}

.Easy nav
{max-width: 100%;
 width: 100%;
 background: #FFFFFF;
 padding: 33px 11px 15px 25px;/*上、右、下、左　（記入欄、余白）*/
 border-radius: 10px;}

.Yinkon/*文字記入系の、class*/
{max-width: 100%;
 width: 100%;
 outline: none;
 border-radius: 0;/*いらないかも*/
 border: none;
 -webkit-appearance: none;
 font-size: 1.3rem;
 background-color: transparent;}

.Yinkon::-webkit-calendar-picker-indicator
{display: none;
 background-color: transparent;}


.Entercheck/*✅チェックボタン系*/
{width: 88%;/*メイン記入バーの長さ*/
 margin: 72px 0px 0px 35px;
 position: relative;}/*上、右、下、左*//*上は間隔、左だけでいいかも*/
 /*いらないかも　position: relative;*/

.ULportion/*ulのclass*/
{position: relative;
 left: 70px;
 padding-top: 17px;}

ul.ULportion li
{margin-bottom: 26px;}
/*transform: translate(-50%, -50%) scale(2,2);*/

label.Iportion
{display: inline-block;/*??*/
 padding: 0 0 0 1.8em;
 font-size: 1.3rem;/*font-size: ;　効いてる*/
 color: #C0C0C0;/*押されてない状態、文字色*/
 cursor: pointer;}

label.Iportion:before
{content: '';/*要る*/
 display: inline-block;/*??*/
 position: absolute;
 left: -10px;
 width: 30px;/*ボタン大きさ*/
 height: 30px;
 border-radius: 80%;/*ボタンの丸さ*/
 box-shadow: 0px 1px 0 0 rgba(0, 0, 0, .2);/*??*/
 box-sizing: border-box;
 background-color: #C0C0C0;/*押されてない状態、チェック色*/
 border: 10px solid #FFFFFF;/*押されてない状態、白枠*/
 transition: border .5s ease;}

input:checked + label.Iportion:before
{background-color: #6AB73F;/*チェックINN、#00B4B4 #55D8C6 ボタン緑色*/
 border: 3px #008080 solid;}

input + label.Iportion
{transition: color .7s ease;}

input:checked + label.Iportion
{color: #5D5D5D;}/*チェックINN、文字色*/


.Entersend/*✅✅送信ボタン系*/
{width: 50%;/*メイン記入バーの長さ*/
 padding-top: 65px;
 margin: 0 auto;}
 /*いらないかも　position: relative;*/

/* ✅ 送信ボタン 有効デザイン 無効デザイン ✅ */
.BTN/* buttonタグのリセットCSS */
{width: 100%;
 border: none;
 outline: none;
 appearance: none;
 background-color: #00A0A0;/*青緑色*//*透明 background-color: transparent;*/
 border-radius: 10px;/*直角角にしたい　border-radius: 0;*/
 font-size: 1.5rem;
 color: #FFFFFF;
 padding: 13px 24px;
 cursor: pointer;}/* ポインターカーソルを表示 */
 /*少し文字を左寄りにしたい場合、text-align: left;
 padding: 8px 0px 8px 70px;　/*上、右、下、左*/

.BTN[disabled]
{background-color: #CCCCCC;/*無効のグレー*/
 cursor: not-allowed;}/* クリック不可のカーソルを表示 */
/*　☑️　☑️　ここまで、送信ボタン 有効デザイン 無効デザイン　☑️　☑️　*/

.BTN:hover
{background-color: #20B2AA;}





/*　🔵　　🔵　左側、ダイレクト案内系　🔵　　🔵　　🔵　　🔵　　🔵　　*/
.info
{display: grid;
 place-items: start center;}

.info .text/*左サイドの、小文の文字*/
{color: #004F2E;/*こっちの全体文字色*/
 margin: 100px 0 0 45px;/*上、右、下、左　（左が、最左の余白）*/
 letter-spacing: 0.2rem;}/*文字個々、横サイド、くっつき具合*/

.info .text span
{line-height: 1.6;}/*一行二行の間隔*/

a.https
{color: #004F2E;}

.info .social-button
{padding-left: 23px;
 margin: 120px 0px 0px 0px;/*上、右、下、左　（上が、アイコン上の余白）*/
 text-align: left;}

dl
{margin-left: -13px;}/*少し左寄せる*/

dl dd a
{float: left;/*要る*/
 text-align: center;/*要る*/
 position: relative;/*いらないかも??*/
 list-style: none;/*一応、置いとく*/
 width: 60px;
 height: 60px;
 line-height: 55px;/*小さい数字(上)、大きい数字(下)*/
 font-size: 30px;
 background-color: #F8F8FF;
 color: #004F2E;
 border: 3px solid #008080;
 border-radius: 50%;
 margin-left: 37px;
 transition: background-color 1000ms, color 1000ms;}

dl dd a:hover
{cursor: pointer;
 background-color: #F8F8FF;
 color: #6AB73F;
 border: 3px solid #57CB19;
 transition: background-color 1000ms, color 1000ms;}

/*　⚫️　　⚫️　左側、ダイレクト案内系、ここまで　⚫️　　⚫️　　⚫️　　⚫️　　⚫️　　*/






@media (max-width: 950px)/*元は 857px〜950px*/
{.FormaBG
	{max-width: 100%;
		width: 600px;/*元は、600px　くらい*/
		grid-template-columns: 597px;/*元は、597px　くらい*/
		grid-auto-rows: 590px 1150px;/*左の高さ400px 右の高さ800px*/
		margin-left: 0px;}/*元は、50px*/

		.info .text/*左サイドの、小文の文字*/
		{color: #004F2E;/*こっちの全体文字色*/
			margin:66px 0 0 30px;/*上、右、下、左　（左が、最左の余白）*/
			letter-spacing: 0.2rem;}/*文字個々、横サイド、くっつき具合*/

			.info .social-button
			{padding-left: 43px;
				margin: 50px 0px 0px 0px;/*上、右、下、左　（上が、アイコン上の余白）*/
				text-align: left;}}



/*☑️　☑️　☑️　ここまで、Javascriptイベントアラート加工、Javascript含む☑️　☑️　☑️　*/





/*広告の1　🔴🔵　　✅✅✅　　🔴🔵*/
div.Affiliate/*広告用Affiliate*/
{display: flex;
	flex-wrap: wrap;/*自動で画面内で表示調整、オート２段目に移す*/
	justify-content: space-evenly;
 margin: 30px auto;}

/*広告の2　🔴🔵　　✅✅✅　　🔴🔵*/
.ACrelation1
{text-align: center;
margin: 66px 0px 0px 0px;}/*上、右、下、左*/

.ACrelation2
{max-width: 1150px;/*1250px でもいい。*/
 width: 100%;
 padding: 10px;
 margin: 0 auto;}

 .ACrelation3 li
 {width: 330px;
	 display: inline-block;
  padding: 0px 0px 19px 0px;/*上、右、下、左*/
  margin: 0px 35px 16px 35px;}
  /*background-color: #DDEEFF;　薄い青色*/