@charset "utf-8";

/* 
 * **************************************************
 * 見出し　デザイン
 * **************************************************
 */

 #content ul,
 #content ol {
  font-size: 1rem;
  line-height: 1.8rem;
 }

 sup {
  font-size: 0.7em; /* テキストを小さくする */
  vertical-align: super; /* 位置を調整する */
}

 .midashi067 {
  position: relative;
  padding: 1.5rem 0 1rem 0;
  text-align: center;
  border-top: 2px solid #01ACDC;
  border-bottom: 2px dotted #01ACDC;
  background: #fff;
  margin-top: 2.5em;
  margin-bottom: 1em;
  color: #01ACDC;
}

.midashi067:before,
.midashi067:after {
  position: absolute;
  content: '';
}

.midashi067:before {
  top: -35px;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  border: 2px solid #01ACDC;
  border-radius: 50%;
  background: #fff;
}

.midashi067:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.midashi067 i {
  font-size: 2.3rem;
  line-height: 60px;
  position: absolute;
  z-index: 1;
  top: -35px;
  left: calc(50% - 38px);
  width: 80px;
  height: 60px;
  text-align: center;
}

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


.heading-16 {
  text-align: center;
  margin-bottom: 0.8em;
  font-weight: bold;
  color: #01ACDC;
  font-size: 1.3em;
  position: relative;
  font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
}

.heading-16::before,
.heading-16::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4.5%;
  height: 2px;
  background-color: #01ACDC;
}

.heading-16::before {
  left: 280px;
  margin-right: 15px;
  transform: rotate(55deg);
}

.heading-16::after {
  right: 280px;
  margin-left: 15px;
  transform: rotate(-55deg);
}

/*sp*/@media (max-width: 640px)  {
  .heading-16::before,
  .heading-16::after {
  width: 8%;

}
  .heading-16::before {
    left: 15px;
  }
  
  .heading-16::after {
    right: 15px;
  }

}


h4.ttl-menu {
  background-color: #618e19;
  color: white;
  padding: 10px;
  width: 100px; /* Set width to 100px */
  margin: 0 auto; /* Center horizontally */
  text-align: center;
  border-radius: 5px;
  position: relative; /* Add relative positioning */
  z-index: 1; /* Ensure it's on top of the div */
  position: absolute;
  top: -1.5em;
  left: 50%; /* Center horizontally */
  transform: translateX(-50%);
}

h4.ttl-menu::after {
  content: '';
  position: absolute;
  bottom: -10px; /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #618e19; /* Match the background color */
}

.under-div {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  margin: -20px auto 0 auto; /* Move the div up by 20px to overlap */
  position: relative;
  z-index: 0; /* Make sure it's behind the h4 element */
}



.section-menu {
  background-color: #f9f8f5;
  position: relative;
  padding: 3em;
  margin: 7em 0 30px;
  border-radius: 20px;
  border: #618e19 solid 2px;
}
.section-menu p {
  margin: 10px 0;
}
.section-menu ol {
  margin-left: 20px;
}
.section-menu ul {
  list-style-type: square;
  margin-left: 20px;
}

ul.custom-list li::before {
  content: '・';
  margin-right: 0.5em;
}
ul.custom-list li {
  text-indent: -1.5em; /* ぶら下げ文字のためのインデント */
  padding-left: 1.5em; /* テキストの開始位置を調整 */
}


.section-menus {
  display: flex;
  justify-content: space-between;
  margin-top: 2em;
}

.section-menus .img-R {
  padding-right: 2em;
}

.section-menus .img-R img {
  width: 300px;
}

.section-menu2 {
  position: relative;
  padding: 0;
  width: 48%;
}
.section-menu2 img {
  width: 100%!important;
  height: auto;
  border-radius: 20px;
}

/*sp*/@media (max-width: 640px) {
  .section-menus {
    flex-direction: column;
  }
  .section-menus .img-R {
    text-align: center;
  }
  
  .section-menu2 {
    width: auto;
    margin-bottom: 6em;
  }
}

.circle-list li::before {
  content: "①";
  margin-right: 5px;
}
.circle-list li:nth-child(2)::before {
  content: "②";
}
.circle-list li:nth-child(3)::before {
  content: "③";
}

.menu-container {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 640px) {
  .menu-container {
    flex-direction: column;
  }
}

.osusume {
  width: 440px;
}

.setumei {
  width: 45%;
}

/*sp*/@media (max-width: 640px) {
  .osusume, .setumei {
    width: 100%;
  }
}





.section-menus h3 {
  position: relative;
  padding: 1rem 0;
  color: #618e19;
  text-align: center!important;
  margin-bottom: 0;
}





/* 
 * **************************************************
 * 共通
 * **************************************************
 */

 /*　テーブル　*/

 .styled-table {
  font-size: 1.5em;
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.styled-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  width: 25%;;
}
.styled-table th {
  border: 1px solid #ddd;
  padding: 8px;
  background-color: #e7f3fe;
  text-align: center;
}


/*　ボタン　*/
.button-048 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 200px;
    margin: 2em auto 2em;
    padding: .9em 2em;
    border: none;
    border-radius: 25px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1.5em;
}
.button-048 a {
	text-decoration: none;
	color: #FFFFFF!important;
}

.button-048::before {
    position: absolute;
    right: calc(2em + 2.5px);
    transform: translateX(50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #fff;
    content: '';
}

.button-048::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 3px solid #2589d0;
    border-right: 3px solid #2589d0;
    content: '';
}


/*sp*/@media (max-width: 640px)  {
  .spT001 {
    padding-top: 50px !important;
  }
}


.box-kansyu {
  display: flex;
  align-items: center;
  background: #EEF9F9;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}

.kansyu {
  width: 62px;
  height: 62px;
  background-color: #00b7c4;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  color: #ffffff;
  font-weight: bold;
}

.name {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  font-size: 10px;
}

.name p {
  margin: 0;
}


.two-col-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}

.column {
  flex: 1;
  min-width: 200px;
  background-color: #DEF1F9; 
  padding: 20px;
  border-radius: 8px;
}

.column h5 {
  font-weight: bold;
  color: #3A509B;
}
.column img {
  display: block;
  margin: 0 auto 10px;
  width: 300px;
}


/*sp*/@media (max-width: 640px) {
  div.two-col-container {
    flex-direction: column;
  }
  div.two-col-container .column {
    width: 100%; /* Adjust width to 100% */
    margin-right: 0; /* Remove margin to prevent overflow */
    box-sizing: border-box; /* Include padding and border in width calculation */
  }
}

.point {
  background-color: #e7f3fe;
  padding: 15px;
  margin: 10px 0;
  border-radius: 20px;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  text-align: center;
}
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-radius: 15px;
  font-weight: bold;
  color: #01ACDC;
}
.grid-item img {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
}
@media (max-width: 768px) {
  .grid-container {
      grid-template-columns: 1fr;
  }
  .grid-item img {
    width: 80%;
  }
}

.styled-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 1.5em;
}

.styled-list > li {
  background-color: #fff;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.styled-list > li > ul {
  list-style-type: disc;
  margin-left: 0;
  padding: 0;
}

.styled-list > li > ul > li {
  display: inline-block; /* Display items in a single line */
  margin: 5px 10px; /* Adjust the margin as needed */
}

.large-text {
  font-size: 1.2em; /* Adjust the size as needed */
  font-weight: bold;
}

hr {
	border: 0;
	height: 8px;
	background-image: repeating-linear-gradient(135deg, #777 0px, #777 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 8px 8px;
}


.text-with-image {
  text-align: left; /* Ensure text is left-aligned */
}
.text-with-image img {
  display: block;
  margin: 20px auto 0; /* Center the image and add margin at the top */
  width: 300px;
}




.image-container img {
  width: 100%;
  height: auto;
}
.figure-image001 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img100 img {
  width: 100%;
  height: auto;
}




.text-with-image {
  display: flex;
  align-items: center;
}

.text-with-image .text {
  flex: 1;
}

.text-with-image .image {
  flex: 1;
  text-align: right;
}

.text-with-image .image img {
  max-width: 100%;
  height: auto;
}


/*sp*/@media (max-width: 640px) {
  .text-with-image {
    flex-direction: column;
    text-align: center;
  }

  .text-with-image .image {
    text-align: center;
    margin-top: 20px;
  }
}


.horizontal-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.horizontal-list li {
  flex: 1 1 calc(33.333% - 10px); /* 3 columns with some margin */
  margin: 5px;
  box-sizing: border-box;
  font-size: 1.6em;
  max-width: calc(33.333% - 10px); /* Ensure no more than 3 columns */
}

/*sp*/@media (max-width: 640px) {
  .horizontal-list li {
    flex: 1 1 100%; /* Full width for mobile */
    max-width: 100%; /* Ensure full width */
  }
}

.highlight {
  display: inline-block;
  padding: 2px 8px;
  position: relative;
  top: -10px;
  background-color: #3A509B;
  color: #fff;
  border-radius: 20px;
  padding: 0 20px;
  margin-top: 0.5em;
  text-align: center; /* Center the text inside the highlight */
  white-space: nowrap; /* Prevent text from wrapping inside the highlight */
  font-size: 0.8em;
}

.highlight::after {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  clear: both;
}


.container-2B {
  background-color: #DFF1F9;
  width: 100%;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  position: relative;
  margin-top: 2em;
  box-sizing: border-box;
}
.title-2B {
  text-align: center;
  font-size: 3em;
  font-weight: bold;
  color: #3B509B;
  margin-bottom: 20px;
}
.exercise-2B {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
  text-align: center;
}
.exercise-2B div {
  width: 45%;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  color: #3B509B;
  border: 2px solid #3B509B;
}
.exercise-2B div strong {
  display: block;
  margin-bottom: 10px;
  border-bottom: 2px dotted #3B509B;
  padding-bottom: 5px;
  font-size: 2.2em;
  font-weight: bold;
}
.exercise-2B div p {
  margin: 10px 0 0;
  font-size: 1px;
  color: #333;
}
.note-2B {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.point-2B {
  position: absolute;
  background-color: #3B509B;
  color: #fff;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 10px;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
  top: 60%;
  z-index: 10;
  margin-bottom: 20px; /* Add this line to create space below */
}

.point-2B::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #3B509B;
  border-bottom: 0;
  margin-top: -1px;
}

/*sp*/@media (max-width: 640px) {
  .point-2B {
    top: 55%; /* Adjust the top position for mobile view */
  }
}
.advice-2B {
  text-align: center;
  line-height: 1.5;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-top: 60px;
  padding-top: 2.5em;
  border: 2px solid #3B509B;
}
.advice-2B p,
.advice-2C p {
  text-align: left;
}
.advice-2B strong,
.advice-2C strong {
  font-size: 2.3em;
  font-weight: bold;
  color: #3B509B;
}

.advice-2C {
  text-align: center;
  line-height: 1.5;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid #3B509B;
}

.stylish-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2em;
  margin: 3em 2px;
  cursor: pointer;
  border-radius: 12px;
  transition: background-color 0.3s ease;
  display: block; /* Change to block to center align */
  margin-left: auto; /* Center align */
  margin-right: auto; /* Center align */
}

.stylish-button:hover {
  background-color: #FFA500;
}

.check-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .check-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .check-container p {
    margin-bottom: 1em;
  }
}

.waku-txt {
  color: #fff;
  background-color: #618e19;
  padding: 5px 10px;
  border-radius: 15px;
  margin: 0 0.5em;
  font-size: 0.95rem;
  position: relative;
  top: -4px; /* Move the element 2px up */
}


table.tb-A {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed; /* Ensures equal width columns */
}

table.tb-A, .tb-A th, .tb-A td {
  border: 1px solid #ddd;
  font-size: 0.85rem;
  text-align: center;
}
.tb-A th, .tb-A td {
  padding: 10px;
  word-wrap: break-word; /* Ensures content doesn't overflow */
}
.tb-A th {
  background-color: #7f91d1;
  color: white;
  text-align: center;
}
.tb-A td:first-child {
  background-color: #edeef8; /* Add your desired color */
  text-align: center;
  vertical-align: middle;
  width: 100px;
}

a {
  color: #2980b9;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hover-button {
  display: block;
  transition: transform 0.2s;
  font-size: 1rem;
  width: 50%;
  border-radius: 35px;
  border: none;
  background-color: #7f91d1;
  padding: 0.5rem 1rem;
  color: #fff;
  margin: 10px auto;
}

@media (max-width: 768px) {
  .hover-button {
    width: 90%;
  }
}

.hover-button span {
  font-size: 0.8rem;
}

.hover-button:hover {
  transform: translateY(-5px);
  color: #7f91d1;
  background-color: #edeef8;
}

.waku-A {
  display: block;
  background-color: #edeef8;
  padding: 20px;
  border-radius: 15px;
  width: 50%;
  margin: 10px auto 2rem;
  border: 3px solid #7f91d1;
}

@media (max-width: 768px) {
  .waku-A {
    width: 90%;
  }
}

.waku-A li {
  position: relative;
  padding-left: 1.5em;
}

.waku-A li:before {
  content: '●';
  position: absolute;
  left: 0;
  top: 0;
  color: #7f91d1;
  font-size: 1.2em;
  line-height: 1.5em;
}


h4.icon img {
  vertical-align: middle;
  margin-right: 5px;
  width: 115px;
}

h4.icon {
  border-bottom: 2px dashed #344870;
  display: inline-block;
  width: 100%;
  color: #344870;
  font-size: 2rem!important;
  margin-bottom: 1rem;
  margin-top: 3rem;
}

/*　注意ボックス　*/
.box-004 {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 1em 1.5em 1em 2.5em;
    border-radius: 15px;
    background-color: #ffebee;
    color: #333333;
    border: 1px solid #f06060;
    width: 80%;
    font-size: 0.6rem;
}

.box-004 p::before {
    display: inline-block;
    width: 28px;
    height: 28px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
    margin-right: .7em;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.box-004 p {
    margin: 0;
    padding: 0;
}

/*　注意ボックス2　*/
.box-005 {
  align-items: center;
  margin: 0 auto;
  padding: 2.5em;
  border-radius: 15px;
  background-color: #fffceb;
  color: #333333;
  border: 1px solid #f27f48;
  width: 50%;
  font-size: 0.6rem;
}

@media screen and (max-width: 768px) {
  .box-005 {
    width: 80%;
  }
}

.box-005 p {
  margin: 0;
}

.box-005 ul {
    list-style-type: none; /* Remove default list style */
    padding-left: 0; /* Remove default padding */
}

.box-005 ul li::before {
    content: '✔'; /* Add check mark before each list item */
    color: #f27f48; /* Set color of the check mark */
    margin-right: 0.5em; /* Space between check mark and text */
    font-weight: bold; /* Make check mark bold */
}


/*　3カラム　*/
.info-container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 各ボックス間のスペース */
}

.info-box {
  font-family: "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif!important;
  position: relative;
  background-color: #f8f8f8; /* 背景色 */
  padding: 50px 20px 0px;
  flex: 1; /* 各ボックスを同じ幅にする */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を追加して見やすく */
  margin-top: 2em;
  font-size: 0.9em;
}

.info-box img {
  width: 100%;
}
.info-box h5 {
  font-size: 1.1rem!important;
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top:1rem;
  font-feature-settings: "palt";
  color: #344870;
}

.info-box p {
  text-align: justify;
}

.info-box .bubble {
    font-family: "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif!important;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #01acdc;
    color: white;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
  }

@media (max-width: 640px) {
  .info-container {
    flex-direction: column; /* スマホで縦に並ぶように設定 */
  }
}