/* Special,exorcism,mail */

*,
*::before,
*::after {
  box-sizing: border-box;/* bodyにもあり paddingを含めない */
}
/* −−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

/* メインの作業域 必要 */
.concept{
  display: inline-block;/* ここは固定 */
  margin: 0 auto;
  width: 100%;
  max-width: 600px; 
}

/* concept-flex、鑑定 左に画像・右にご案内文 */
.concept-flex{/* ご案内文 */
  display: flex;/* ここは固定 */
  margin: 0 auto;
  width: 100%;
  max-width: 600px; 
  flex-direction: row-reverse;/* 逆向き */
}

.conceptimg {width: 200px; vertical-align: top; border: 0;}

.concepttext {flex:1; vertical-align: top; padding:10px;}/* ご案内文 */

/* concept-flex 以上 */

/* −−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

/* 普通のゴシック文字指定 
p, div, span, flex, ul, li, table, td, tr {
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	line-height: 1.5;}*/

/* −−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

/* 鑑定コース 上説明、各占いコース全て */
.course { margin-bottom: 16px; line-height: 1.5;} /* course 文  */


.leadv{ margin-top: 24px; line-height: 1.6; text-align: left;}/* 茶文字　守護霊・良縁・オーラ・叶力・供養、過去#8000ffバイオレット文字 */

.leadg{ color: #404000; line-height: 1.7; text-align: left;}/* 金文字 金財(鶯金より明るい) */


.leadf{ color: #515100; margin-top: 24px; line-height: 1.6; text-align: left;}/* 鶯金文字 万宝・霊障 */

/* −−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

/* 題名{display: inline;}外している */
h1, h2, h3 {
	color: #ff69b4; /* 濃いピンク#ff0080 */
	
	font-family: Georgia, 游明朝, "Yu Mincho", YuMincho," Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif; /* 無印　Helvetica”,”Lucida Grande”,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W6″,”ＭＳ Ｐゴシック”,Osaka,sans-serif */
	
	font-weight:bold; 
	margin-left: auto; 
	margin-right: auto;  /* 中央 */
	text-align: center;
}


/* 題名トップ */
h1 { font-size: 2.1rem; margin-top: 32px; letter-spacing: 0.1rem; transform: rotate(.03deg);}

/* suppicateの副題ピンク */
.suppli-sub { color: #ff69b4; text-align: center;}

/* 金財の見出し オレンジ */
.uni { color: #ff4500}
/* 金財の副題ピンク */
.uni-sub { color: #ff4500; text-align: center;}

/* exorcism用の見出し 青紫mediumorchid */
.exor { color: #ba55d3; letter-spacing: 0.07rem; text-align: center;}

@media (max-width: 480px) {
.uni-sub { text-align: left; margin-left: 5px;}
.exor { letter-spacing: 0.01rem;}
.suppli-sub .exor-sub{ text-align: left; margin-left: 5px;} /* 祈祷とexorcismの副題 */
.suppli-sub img{text-align: center;}
}


/* 申し込み白抜き文字 */
h2 { font-size: 1.8rem; color: #fff; letter-spacing: 0.1rem; transform: rotate(.03deg); text-align: center; margin-bottom: 0px;}

/* 占いコース名 */
h3 { font-size: 2.0rem; color: #ee5e97; letter-spacing: 0.1rem; }


/* 〜期間限定通信鑑定〜のtop細文字、太文字は直指定 */
h5 { font-size: 1.3rem; color: #ff80c0; font-family: ＭＳ ＰＲゴシック, sans-serif; font-weight: 300; margin-top: 0px; margin-bottom: 0px; letter-spacing: 0.05rem; text-align: center; display: inline; }


/* −−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

/* 説明文の範囲 */
.main400{width: 100%; 
max-width: 480px; 
vertical-align: top; 
text-align: left; 
margin-right: auto; 
margin-left: auto; 
padding-top: 10px; 
padding-bottom: 24px;
 /* 説明文の文字の大きさ */
 }
 
.long{
  background-color: #fefefe;/* 薄いグレー */
  border: 1px lightpink solid;
  margin: 20px 5px;
  padding:0 10px;
  width: auto;
  letter-spacing: 0.02em; 
  line-height: 1.4;
  border-radius: 15px 15px 15px 15px; /* 15px 15px 0px 0px上だけ丸く */
}


/* 説明書き・mail・Formの見出し用枠 */
.pinkbox, .purplebox, .orangebox{
 height: 60px; line-height: 60px; margin-top: 40px; }/* 元45 */

.pinkbox{background-color: #fc8eac;}
.purplebox{background-color: mediumorchid; }/* 開運秘符 オーラ */
.orangebox{background-color: #ff9900; }/* 金財 */

/* <div class="w500">ご利用の流れや申込フォーム */
.w500{
	width: 100%;
	max-width: 550px; 
	text-align: left; 
	border-spacing: 3px 5px;
	margin-right: auto; 
	margin-left: auto; 
	margin-top: 32px;
	border: 0;
	 }


/* 説明事項とフォームメールの背景 */
.tdp{background-color: #ffe4e1; padding: 0 3px;}

/* スマホ用に追加 */
@media (max-width:767px){
.tdp{background-color: transparent;}/* フォーム背景色無し */
}
/* −−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

.img-style {/* 画像の設定 灰枠淵丸 */

  width: 100%;/* ここは変更不可 */
  height: auto;
  padding: 0px;
  /* background: linear-gradient( to bottom,#FFF 70%,#ffe4e1 90%,#FD6E8F );背景グラデーション */
  opacity: 1.0;/* 半透明 */
  background-color:; /* #f8f8f8;背景薄いグレー */
  border: 1px #d8d8d8 solid;
  box-shadow: 0px 0px;/* 1px */
  border-radius: 5px 5px 5px 5px; /* 15px 15px 0px 0px上だけ丸く */
  margin: 0 auto;
  }


.trim {/* トリミング画像 */
  width:100%; 
  height:300px;
  object-fit:cover; /* object-fit:none;元のサイズ維持 */
}

/* −−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

/* 未使用 ご利用の流れの枠 隙間なし */
.detail{border-collapse: collapse; }

/* −−−−−−−−−−−−−−−−−−−−−−−−−−−−− */

/* フォームの入力欄・文字サイズ */
button, input, select, textarea {
font-family : inherit;/* 親要素継承 */
font-size : 100%;
}

/* ご相談文のプレイスフォルダー(書き方の例) */
textarea::-webkit-input-placeholder{font-size: 1.5rem}
textarea:-moz-placeholder{font-size: 1.5rem}
textarea::-moz-placeholder{font-size: 1.5rem}
textarea:-ms-input-placeholder{font-size: 1.5rem}

/* −−−−−−−−−−− */
/* フォーム */
.form {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width:540px;
}
  
.form-item{margin-bottom: 1px; }/* フォーム項目 */

.form-input, .form-textarea, .select-bg{/* 入力欄ピンク背景 */
  border: 0px solid #ddd;
  border-radius: 6px;
  margin-left: 3px;
  margin-bottom: 5px;
  width: 100%;
  background: #ffe4e1;/* 青#eaedf2 */
  font-size: 1.6rem;/* 入力文字 */
  padding: 2px 2px;
}

.form-input {
  height: 48px;
}
.form-textarea {
  height: 180px;
}

input.short{width: 60px; max-width: 100%;}/* 秘符番号・供養 */
input.kigan{width: 100px; max-width: 100%;}/* 祈祷3種の祈願名 */


@media (max-width: 480px) {
.form-item, p, .uranai, .form-input, .form-textarea {
  margin: 0 5px;/* ピンク入力枠 */
  font-size: 1.5rem;
  }
.form-input{
  height: 40px;
  }
.form-textarea {
  height: 200px;
  }
}

.form-btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 300px;/* 元280 */
  max-width: 100%; /* はみ出し防止 */
  display: block;
  letter-spacing: 0.05em;
  background: #0dcaf0; /* ブルー#5bc8ac; */
  color: #fff;
  font-weight: bold;
  font-size: clamp(1.6rem, 2.5vw, 2rem); /* 画面幅に応じて調整 */
  cursor: pointer;
  box-shadow    : 1px 1px 3px #666666;  /* 影の設定 */
  border        : 2px solid #ffffff;    /* 枠の指定 */
  text-align: center;
}

.form-btn:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #fff;     /* 文字色 */
  background    : #fc8eac;     /* 背景色 */
  transition    : 0.1s;         /* なめらか変化 */
  box-shadow    : 1px 1px 3px #666666;  /* 影の設定 */
  border        : 2px solid #ffffff;    /* 枠の指定 */
}

@media (max-width: 480px) {
  .form-btn {
    margin-top: 15px;
    padding: 12px;
    width: 90%;/* 160px */
    font-size: 1.6rem;
  }
}