@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");


/*------------------------ common ------------------------*/
:root {
  --blue: #003f76;
  --gray: #f9f9f9;
  --black: #333333;
  --yellow: #fff000;

  --pc-padding: 100px;
  --shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

  /* Font Sizes */
  --font12: 12px;
  --font14: 14px;
  --font16: 16px;
  --font18: 18px;
  --font20: 20px;
  --font22: 22px;
  --font24: 24px;
  --font28: 28px;
  --font30: 30px;
  --font32: 32px;
  --font36: 36px;
}

/* Responsive Font Sizes */
@media (max-width: 1200px) {
  :root {
    --font12: 1.2vw;
    --font14: 1.4vw;
    --font16: 1.6vw;
    --font18: 1.8vw;
    --font20: 2vw;
    --font24: 2.4vw;
    --font28: 2.8vw;
    --font30: 3vw;
    --font32: 3.2vw;
    --font36: 3.6vw;
  }
}
@media (max-width: 767px) {
  :root {
    --font12: 2.4vw;
    --font14: 2.8vw;
    --font16: 3.2vw;
    --font18: 3.6vw;
    --font20: 4vw;
    --font24: 4.8vw;
    --font28: 5.6vw;
    --font30: 6vw;
    --font32: 6.4vw;
    --font36: 6.8vw;
  }
}

.light-blue {
  color: #1E71B9;
}

.small-contents p {
  width: 100%;
  text-align: left;
}

/* Responsive Main */
@media screen and (max-width: 1050px) {
  .contents-ttl01 .en {
    font-size: var(--font16);
  }

  .small-contents p {
    width: 100%;
    text-align: left;
  }

  main {
    margin-top: 3vh;
  }
}

/* -------- pacage changer --------------*/
.package-layout {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}

.pack-view {
  width: 48%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 20px;
}

.pack-view img {
  width: 100%;
  margin: 0;
}

.pack-view .btm_cnt {
  display: flex;
  background-color: #f9f9f9;
  align-items: stretch;
  margin: 0;
}

.pack-view .btm_cnt p {
  font-size: var(--font16);
  font-weight: bold;
  background: #000;
  color: #fff;
  padding: 2%;
  margin: 0;
  text-align: center;
}

.pack-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  font-size: var(--font16);
}

.list-block-b {
  width: 30%;
  /*border: 1px solid #004077;*/
  padding: 12px 20px;
  justify-content: flex-start;
  margin-bottom: 24px;
  overflow: hidden;
  background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.list-block-b p {
  display: block;
  width: 100%;
  padding: 10px;
}

.list-block-b div {
  display: block;
  width: 100%;
}

.list-block-b img {
  width: 50px;
  height: 50px;
  margin-right: 30px;
}

.list-block-b div span {
  display: block;
}

.list-block-bg-b {
  background-color: #004077;
  /*justify-content: space-between;
  align-items: center;*/
  width: auto;
  max-width: 100%;
}

.list-block-bg-b span {
  display: inline-block;
	text-align: left;
  color: #fff;
}

.list-block-bg-b span .bikou {
  display: block;
  margin-top: 10px;
  margin-left: -20px;
  color: #666;
  font-size: 0.8em;
  line-height: 1.2em;
  letter-spacing: -0.5px;
}

.list-block-bg-b img {
  width: 20px;
  height: 12px;
  margin-right: 10px;
}

.list-block-link {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.list-block-link span {
  letter-spacing: 0;
}

.list-block-link .btn {
  width: 48%;
  padding: 1.5rem;
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  font-weight: bold;
  text-align: center;
  background-color: var(--blue);
  letter-spacing: 2px;
  display: block;
  color: #fff;
}

.list-block-link .btn img {
  width: 20px;
  height: 12px;
  margin-left: 10px;
}

/* Option Lists Styling */
.option-list-strage p,
.option-list-id p,
.option-list-period p {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  background-color: #f9f9f9;
}

.option-list-strage p:hover,
.option-list-id p:hover,
.option-list-period p:hover {
  background: #E3F2FD;
}

/* List Block Check Styling */
.list-block-b .pack-list-check {
  width: 100%;
  display: flex;
  justify-content: flex-start !important;
  align-items: center;
}

.list-block-b .pack-list-check span,
.list-block-b .pack-list-check i {
  display: inline-block;
}

/* Result Block */
.result-block {
  padding: 10px;
  margin-top: 50px;
  background-color: #004077;
  width: 100%; /* デスクトップでは80%の幅 */
  max-width: 480px; /* 最大幅を設定 */
  margin: 30px auto;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.result-block p {
  /*display: flex;
	align-items: left;*/
  width: auto;
  padding: 20px 0;
  text-align: left;
  background-color: #fff;
  color: #333;
}

.result-block p span {
  display: block;
  color: #004077;
  padding: 0 20px;
  font-size: 1.0em;
  text-align: left;
  line-height: 1.4em;
}
.result-block .fee {
	width: 100%;
	display: block;
	text-align: right;
}
.result-block p span strong {
  font-size: var(--font18);
  line-height: 2.0em;
  color: #004077;
  text-align: right;
  background: linear-gradient(transparent 70%, #fff000 20%);
}

/* Model Select Inputs */
.input-strage,
.input-id,
.input-period {
  flex-grow: 2;
  text-align: left;
  color: #004077;
}

/* Padding Utility Classes */
.pad-10 {
  padding: 10px;
}

.pad-20 {
  padding: 20px;
}

.pad-30 {
  padding: 30px;
}

.form-b {
	display: none;
}

.button-b{
		width: 30%;
		padding:40px 0;
		color:#fff;
		margin-top: 50px;
		border-color:#004077;
		background:#004077;
      	font-weight: bold;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	}
	.button-b::before{
       color: #004077;
		background:#fff;
		border-color:#004077;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	}
	.button-b:hover{
       color: #004077;
	}
	a:hover .mail-button {
		color:#004077
	}
	a:hover .mail-button::before{
		width:100%
	}

.question_area {
	  display: block;
      border-radius: 8px !important;
	  overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      background-color: #ffffff;
	  padding: 10px 0 0;
}



/* Responsive Layouts */
@media screen and (max-width: 1180px) {
  .package-layout {
    display: flex;
    width: 100%;
  }

  .pack-view {
    width: 100%;
    display: block;
  }

  .pack-list {
    width: 100%;
    display: block;
    font-size: var(--font10);
  }

  .list-block-link .btn {
    width: 100%;
    justify-content: space-around !important;
  }

  .list-block-link .btn img {
    margin-right: 0;
  }
  .list-block-b {
    width: 100%; /* 幅を100%に設定 */
    margin-bottom: 10px; /* 必要に応じてマージン調整 */
  }
	.result-block p span strong {
	  font-size: var(--font14);
	}
	.button-b{
		width: 600px;
		max-width: 100%;
   		 font-size: var(--font10);
	}
}

/* Prices Layouts */
@media screen and (max-width: 768px) {
  .result-block {
    width: 100%; /* スマホでは幅100% */
    max-width: 100%; /* 最大幅を設定 */
    margin-left: 0;
    margin-right: 0;
  }
	
	.result-block p span strong {
	  font-size: var(--font16);
	}
}

.question_list .a_cnt {
	text-align: left !important;
}
.question_list .a_cnt a {
	display: inline;
}


.price-wrapper {
        width: 100%;
      }

      .price-wrapper .container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        transition: transform 0.3s ease;
        width: 100%;
      }

      .price-wrapper .card {
        width: 30%;
        min-width: 200px;
        max-width: 300px;
        text-align: center;
        flex-shrink: 0;
      }

      .price-wrapper .card img {
        width: 25%;
        height: auto;
      }

      .price-wrapper .title {
        font-weight: bold;
        font-size: 1em;
        margin-top: 0px;
      }

      .price-wrapper .text {
        color: #666;
        font-size: 0.9em;
        margin-top: 10px;
      }

      .price-wrapper .divider {
        width: 40px;
        height: auto;
        flex-shrink: 0;
      }

      @media (max-width: 1000px) {
        .price-wrapper .container {
          transform: scale(calc(100vw / 1000));
        }
      }

      @media (max-width: 768px) {
        .price-wrapper .card {
          width: 100%;
        }
        .price-wrapper .card img {
          width: 30%;
          height: auto;
        }
        .price-wrapper .container {
          padding: 50px 0;
          flex-direction: column;
          transform: scale(1);
        }

      .price-wrapper .title {
        font-weight: bold;
        font-size: 1.2em;
        margin-top: 0px;
      }

      .price-wrapper .text {
        color: #666;
        font-size: 1.0em;
        margin-top: 10px;
      }

        .price-wrapper .divider {
          transform: rotate(90deg);
          width: 30px; /* または height: 20px; にしてもOK */
          margin: -50px 0;
        }
      }