@charset "utf-8";
:root {
    --dullred: #e44650;
    --vividred:#fa0808;
    --vividgreen:#00bf63;
    --vividpink: #f91da8;
    --vividblue: #233dff;
    --vividorange: #ff8337; 
    --red-transparent: rgba(278, 70, 70, 0.5); /* red #e44650で透明度50% */
    --darkred: #862930;
    --skyblue: #00a1e5;
    --paleblue: #E8F8FF; 
    --darkblue: #006b99;
    --white: #ffffff;
    --orange: #ef7700;
    --darkorange: #a75300;
    --bannerblue: #0089c0;
    --salmon: #ffa384;
  }
* { 
  font-family: "Noto Sans JP", sans-serif; 
  font-size: 16px;
  font-weight: 500;
  /* font-optical-sizing: auto;  */
  font-style: normal;
  margin: 0;
  padding: 0;
} 
body {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}
/* header {
  margin-top: 3%;
  margin-bottom: 5%;
} */
footer {
  margin-top: 5%;
}
.whole {
  margin: 0 5%;
}
/* 画像 素材 */
img {
  max-width: 720px;
  margin: 0 auto;
}
#titletext {
  background-color: var(--dullred);
}
.band {
  background-color: var(--dullred);
  padding: 2% 0;
  margin: 30px 0;
  text-align: center;
}
#logo {
  max-width: 130px;
  margin: 0;
  margin-left: auto;
  height: auto;
}
#logo img {
  max-width: 100%;
  margin: 0;
}
.back1 {
  /* max-width: 700px; */
  padding:3%;
  background-color: var(--paleblue);
  
}
/* 文字 */
.band p {
  font-size: 40px;
  color: var(--white);
}
#wakaru {  
  font-size: 20px;
  color: var(--white);
}
.stepline {
  margin-top: 4%;
  padding-left: 10px;
  font-size: 40px;
  font-weight: 700;
  color: var(--white);
  background-color:var(--salmon);
}
.steps {
  font-size: 20px;
  margin-bottom: 10px;
  padding:10px;
  border: 2px solid var(--salmon);
  /* border-radius:  10px; */
}
#zu-w{color: var(--vividred);}
#zu-h{color: var(--vividgreen);}
#zu-a{color: var(--vividpink);}
#zu-b{color: var(--vividblue);}
#zu-c{color: var(--vividorange);}
#seriesName, #mitsumori, .btn, #wakaru,.notewithlink2 {
  text-align: center;
}

.notewithlink1 a, .notewithlink2 a {
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: var(--skyblue);
}


#copyright {
  font-size: 12px;
}
/* 空div要素　ヤフー　自社　動画　サムネイル */
#moviebox {
  max-width: 800px;
  max-height: 500px;
  background-color: var(--skyblue);
}
#mp4YF {
  max-width:640px;
  margin: 0 auto ;
  padding: 0 2% 3% 2%;
}
#madorimo315 {
  width:100%;
  cursor: pointer;
 }

 /* 空div要素　楽天　動画 */
#mp4R {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 2% 3% 2%;
}
 #madorimo315R {
  width:100%;
  cursor: pointer;
 }
/* 別ページに飛ぶボタン */
.pageB a, .pageC a, .gencho a {
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  padding: 10px 30px;
  margin: 3% auto;
  background: var(--dullred);
  box-shadow: 0 5px var(--darkred);
  position: relative;
  top: -2px;
}
.pageB a:hover, .pageC a:hover, .gencho a:hover {
  background: var(--darkred);
  top: 1px;
}

.scrollBtn {
  text-align: center;
  opacity: 1; /* デフォルトの透明度 (完全に表示) */
  transition: opacity 0.3s ease-in-out; /* 透明度の変化に0.3秒のアニメーションを適用 */
}
.scrollBtn img {
  width: 70%;
  padding: 2% 0;
}
.scrollBtn:hover {
  opacity: 0.7; /* ホバー時の透明度 (少し薄く) */
}
/* 「同意する」にチェックされている場合の装飾*/
.btnSend {
  color: #fff;
  border-radius: 5px;
  display: block;
  margin: 3% auto;
  padding: 10px 30px;
  border: none;
  background-color: var(--orange);
  box-shadow: 0 5px var(--darkorange);
  cursor: pointer;
  appearance: none;
  position: relative;
  top: -2px;
}
 /* 「同意する」にチェックされていない場合の装飾*/
.btnSend[disabled] {
  background-color: #ccc;
  box-shadow: 0 5px #9c9c9c;
  cursor: not-allowed; 
}
#mp4{
  margin-bottom: 10%;
}
/* 窓の入力　アコーディオンメニュー */
.ac-parent {
  position: relative;
  border-radius: 10px;
  background: #c9c8c8;
  padding: 15px;
  margin: 5px;
  cursor: pointer;
}
.ac-parent:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  /*横線*/
  width: 20px;
  height: 2px;
  background: #fff;
  background: #000;
}
.ac-parent:after {
  content: "";
  position: absolute;
  top: 50%;
  /* 8px+12px-1px(幅2pxの半分) */
  right: 20px;
  transform: translateY(-50%);
  transition: all .3s;
  /*縦線*/
  width: 2px;
  height: 20px;
  background: #fff;
  background: #000;
}
/* 縦線（after）だけ縦回転させる */
.ac-parent.open:after {
  top: 25%;
  transform: rotate(90deg);
  opacity: 0;
}
.forwardicon {
  margin: 0;
  width: 20px;
  display: flex;
  align-items: center;
 }
.forwardicon img {
  width: 20px;
}
 .flex1 {
  display: flex;
  width: 220px;
  height: 274px;
  margin: 10px 0;
 }
 .flex2 {
  display: flex; /*横並び*/
  /* width: 100%; */
}
.flex2 .checkimg img {
  width: 35px; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.checkimg{
  width: 20%;
  margin: 0 5px 0 0 ;
}

.flex2 .optiontext {
  margin: 0 0 0 5px;
  text-align: left;
  width: 80%;
  font-size: 16px;
}
div.selectFlexBox {
  display: flex;
  flex-wrap: wrap;
}
div.selectBox {
  width:185px;
  height: 265px;
  padding: 2.5px;
  border: 2px solid black;
  border-radius: 5px;
  text-align: center;
}
img.selectImg {
  width: 165px;
  margin: auto;
}
.selectBox select {
  width: 180px;
}
.selectBox input {
  width: 172px;
}
.meaW, .meaH, .checkimg, .hiddenOption, #mailerNote {
    display: none;
}
.meaW, .meaH {
  font-size: 20px;
  margin: 0;
}
.meaW {
  color: var(--vividred);
}
.meaH {
  color: var(--vividgreen);
}
/* select optionの文字 */
/* .optionLetter {
  color: var(--vividred);
} */
.note, .note-bl {
  font-size: 14px;
  color: var(--vividred);
  font-weight: 400;
}
.note-bl {
  color: black;
  font-weight: 300;
}
.note-b {
  font-size: 20px;
  color: var(--vividred);
  font-weight: 600;
}
.note-req {
  font-size: 12px;
  color: white;
  background-color: var(--vividred);
  padding: 2px 3px;
  margin-left: 5px;
}
.iptxt-num input[type='text'],
.iptxt input[type='text'],
.iptxt-add input[type='text'],
.iptxt #comment {
  font: 15px/1.6 sans-serif;
  box-sizing: border-box;
  width: 100%;
  margin: 5px;
  padding: 5px;
  color: #000000;
  border: 1px solid #1b2538;
  border-radius: 4px;
  transition: 0.3s;
}
.iptxt-add input[type='text'],.iptxt-num input[type='text'] {
width: auto;
}
.iptxt #comment {
  width: 800px;
  height: 70px;
}
.iptxt-num input[type='text']:focus,
.iptxt input[type='text']:focus,
.iptxt-add input[type='text']:focus,
.iptxt #comment:focus {
  border: 1px solid #da3c41;
  box-shadow: 0 0 5px 1px rgba(218,60,65, .5);
  outline: none;
}

table , td, th {
	border: 1px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 10px;
	/* width: 30px;
	height: 25px; */
}
/* .ef input[type='text']:focus {
  border: 1px solid #da3c41;
  box-shadow: 0 0 5px 1px rgba(218,60,65, .5);
  outline: none;
} */
/* 窓の入力完了ボタン */
.selectok {
  display: flex;
  justify-content: center;
  align-items: center;
  width:194px;
  height: 274px; 
  border: 2px solid black;
  padding: 2.5px;
  margin: 10px 0;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
}
.selectok label {
  cursor: pointer;
}

.selectok input, .nextwindow input {
  display: none;
}
/* 次の窓入力ボタン */
.nextwindow label {
  display: block;
  width: 150px;
  background: #00a1e5;
  color: #fff;
  padding: 8px;
  /* margin: 10px; */
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  border-radius: 30px;
  cursor: pointer;
  
}
.policy-container {
  width: 800px; 
  height: 200px; 
  overflow: auto; /* 内容がはみ出た場合にスクロールバーを表示 */
  border: 1px solid #ccc; 
  /* padding: 10px;  */
}
.policy, .company {
  font-weight: 400;
  font-size: small;
}
.policy-bold {
  font-weight: 500;
  font-size: small;
}
/* メール関連 */
.RakutenNote {
  color: red;
  border: 2px solid red;
  max-width: 800px;
  padding: 4px;
  text-align: center;
}

@media screen and (max-width: 640px) {
body {
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
}
  img {
    width: 95%;
  }

  .iptxt #comment, .policy-container {
    width: 100%;
  }

  #mp4R {
    width:320px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 477px) {
body {
  max-width: 400px;
  margin: 0 auto;
  padding: 0;
}
  img {
    width: 95%;
  }
  #mp4YF {
  max-width:400px;
  margin: 0 auto;
}
#madorimo315 {
  width:100%;
  cursor: pointer;
 }
  .iptxt #comment, .policy-container {
    width: 100%;
  }
  p, .notewithlink1 a, .notewithlink2 a {
    font-size: 12px;
  }
  .band p, .stepline {
    font-size: 30px;
  }

  .iptxt, .iptxt-add, .ac-parent {
    font-size: 14px;
  }

  .frame {
    width: 95%;
  }
  .forwardicon {
    display: none;
  }
  .checkbox {
    margin: 5% auto;
  }
  #mp4R {
    width:320px;
    margin: 0 auto;
  }
  }