@charset "utf-8";
/*
最下層共通
*/

body{
  min-width: auto;
  text-align: justify;
}

.content-wrap{
  padding: 0 50px;
}

/*挿入画像装飾*/
.image-frame{
  border: 8px solid #fff;
  -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 0, .1);
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, .1);
  box-sizing: border-box;
  margin: 0 0 20px 20px;
  float: right;
  max-width: min( 50%, 400px );
  max-width: min( 40%, 350px );
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

:where(.overview, .section-general, .example-title, .content-yellow, .item-description) :where(h2,h3) {
  clear: both;
}

/*メインヴィジュアル*/
.mainvisual {
    display: flex;
    position: relative;
    justify-content: right;
    width: 100%;
    height: 300px;
}

.mainvisual-left {
  position: absolute;
  left: 0;
  max-width: 1102px;
  min-width: 50%;
  margin: 0 auto;
  z-index: 10;
  align-self: center;
  padding: 0 20px;
}

.mainvisual-title{
  margin: auto;
  width: fit-content;
}

.mainvisual h1 { /*ページタイトル*/
  font-size: 40px;
  color: rgb(255, 255, 255);
  line-height: 1.426;
  text-align: left;
  text-shadow: 0px 0px 6.37px rgba(0, 0, 0, 0.74);
  margin: 0;
}

.mainvisual-subtitle { /*サブタイトル「サービス紹介」*/
  font-size: 23px;
  color: rgb(128, 79, 34);
  line-height: 2.43;
  text-align: left;
  font-weight: bold;
  margin: 30px auto 0;
  width: fit-content;
  position: relative;
}

.mainvisual-subtitle span:nth-child(1) {
  color: #fff;
  width: fit-content;
  -webkit-text-stroke: 6px #fff;
  text-stroke: 6px #fff;
}

.mainvisual-subtitle span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  color: rgb(128, 79, 34);
}

.mainvisual-right { /*メインヴィジュアル画像*/
  width: 70%;
  position: relative;
  display: inline-block;
}
.mainvisual-right img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: bottom;
  display: block;
}
.mainvisual-right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 20%);
  pointer-events: none;
}

/*ボタン*/
.orange-button{
  position: relative;
  display: block;
  padding: .8em 1.2em .8em 2.8em;
  color: #fff !important;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  background: #ed7209;
  border-radius: 10.0em;
  border: none;
  margin: 0 10px 0 0;
  line-height: 1.2;
  width: fit-content;
}
.orange-button::before{
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  left: 1.4em;
  width: 0.8em;
  height: 0.8em;
  background: #fff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
#support .orange-button{
  display: inline-block;
}

/*見出し*/
.section-title { /*セクションタイトル(緑の丸)*/
  font-size: 30px;
  color: #804f22;
  position: relative;
  z-index: 1;
  margin-bottom: 50px;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px; /* 下線の位置を調整 */
  width: 100%;
  height: 1px; /* 下線の太さ */
  background-color: #76a968; /* 下線の色 */
  z-index: 1; /* 下線をテキストの上、円の下に配置 */
}
.section-title::after {
  height: 100px;
  width: 100px;
  border-radius: 9999px;
  background-color: #ecf4e3;
  content: ""; /* 空のコンテンツを作成 */
  position: absolute; /* h2の下に絶対位置で配置 */
  left: -40px; /* 円を中央に配置 */
  top: -20px;
  z-index: -1;
}


/*本文*/
.section-general p,
.overview p,
.example p,
.content-wrap p,
.content-text{
  font-size: 18px;
}

.content-text{
  line-height: 1.8;
}
.content-text:first-child{
  padding-bottom: 0;
}
.content-text:last-child{
  padding-bottom: 0;
}

.add-bold { /*本文太字部分*/
  font-weight: bold;
}


/*セクション大枠*/
.section-general {
  max-width: 1102px;
  margin: 0 auto 70px;
  padding:  50px;
}

.overview-wrapper { /*背景ベージュ部分*/
  background-color: #f9f8f5;
  padding: 50px;
}

.overview { /*背景ベージュ部分の中身*/
  max-width: 1102px;
  margin: 0 auto;
  background-color: white;
  border-radius: 18px;
  padding: 50px;
  position: relative;
}

.overview img {
  width: 100px;
  float: right;
  padding: 0 1.5em;
}

.content-yellow { /*背景黄色部分*/
  background-color: #fffbd5;
  border-radius: 25px;
  padding: 1px 30px 30px;
  margin: 40px 0;
  position: relative;
}
.content-yellow > img {
  width: 127px;
  float: right;
}
.content-yellow h3 {
  margin: 30px 0;
  font-size: 27px;
  padding-bottom: 10px;
  border-bottom: 5px dotted #76a968;
}

/*黄色リスト*/
.yellow-list{
  margin: 30px 0;
}
.yellow-item{
  padding: 30px !important;
  margin-left: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
  position: relative;
}
.yellow-item:nth-child(odd){
  background-color: #FCFCE8;
}
.yellow-item:nth-child(even){
  background-color: #FFFFD9;
}
.yellow-item:first-child{
  border-radius: 20px 20px 0 0;
}
.yellow-item:last-child{
  border-radius: 0 0 20px 20px;
}
.yellow-item .add-bold{
  position: relative;
  font-size: 20px;
  padding-bottom: 1em;
  padding-left: 1.5em;
}
.yellow-item .add-bold::before{
  position: absolute;
  content: "";
  top: 0.3em;
  left: 0;
  width: 1em;
  height: 1em;
  background-color: #ed7209;
  border-radius: 50%;
}
.yellow-item span{
  color: #fff;
  font-size: 18px;
  background-color: #ed7209;
  border-radius: 20px;
}
.yellow-list-icon{
  width: 10%;
  height: 100%;
  min-width: 100px;
  position: relative;
}
.yellow-list-icon::before{
  position: absolute;
  content: "";
  padding-top: 100%;
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 50%;
}
.yellow-list-icon img{
  filter: brightness(0) saturate(100%) invert(95%) sepia(44%) saturate(7386%) hue-rotate(316deg) brightness(109%) contrast(84%);
  margin: auto;
  display: block;
  width: 100%;
  transform: scale(0.7);
}
.space{
  display: none;
}

/*青背景チェックリスト*/
.check-list{
  background-color: #EFF7FB;
  padding: 30px !important;
  margin: 30px 0 0;
  border-radius: 20px;
}
.check-item{
  list-style: none;
  padding-left: 1.5em;
  margin-left: 0;
  text-indent: -1em;
  line-height: 2.0;
  padding-bottom: 10px;
}
.check-item:first-child{
  padding-top: 0;
}
.check-item:last-child{
  padding-bottom: 0;
}
.checkbox{
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: #D8327E;
  border-radius: 5px;
}
.checkbox::before{
  position: absolute;
  display: inline-block;
  content: "";
  bottom: 0.25em;
  left: 0.2em;
  width: 2.5px;
  height: 0.4em;
  border-radius: 3px;
  background-color: #fff;
  transform: rotate(-45deg);
}
.checkbox::after{
  position: absolute;
  display: inline-block;
  content: "";
  bottom: 0.4em;
  left: 0.3em;
  width: 0.6em;
  height: 2.5px;
  background-color: #fff;
  transform: rotate(-45deg);
}
.underline{
  background: linear-gradient(transparent 60%, #F3FC62 30%);
  display: inline;
  font-weight: bold;
}


/*エンディングページの場合、「ご相談事例」の枠*/
.example {
  max-width: 1102px;
  border-radius: 25px;
  box-shadow: 0px 0px 12.61px 0.39px rgba(0, 0, 0, 0.14);
  margin: 50px auto;
  padding: 30px;
  position: relative;
}
.example > img {
  width: 158px;
  position: absolute;
  bottom: 20px;
  right: 10px;
  z-index: -1;
}
.example-title {
  border-bottom: 5px dotted #ebcc5e;
}
.example h3 {
  border-left: 8px solid #76a968;
  color: #76a968;
  padding: 3px 15px;
  margin-bottom: 10px;
}


/*エンディングページの場合、「エンディングノートの内容とは？」の項目リスト*/
.item{ 
  list-style: none;
  color: black;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 160px;
  gap: 0 10px;
}
.item li {
  margin-top: 5px;
}
.item a {
  text-decoration: none;
  color: black;
  border-bottom: 1px solid black;
  font-size: 18px;
}
.item-description{/*項目リストの詳細*/
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.item-description li{ 
  list-style: none;
}
.item-description h3 { /*項目リストの詳細見出し(オレンジ色)*/
  border-left: 8px solid #ed7209;
  font-size: 27px;
  padding: 3px 15px;
  margin-bottom: 40px;
}

/*その他サポート*/
#support{
  width: auto !important;
}

.support-content {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
}

.support-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 240px;
}
.support-item img {
  width: auto;
  height: 150px;
}
.support-item a {
  transition: opacity 0.2s ease;
  text-decoration: none;
  text-decoration: none;
}
.support-item a:hover {
  opacity: 0.7; 
}

.support-item-title {
  font-size: 24px;
  color: white;
  text-align: center;
  border-radius: 10px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}
.support-item-title--orange{
  background-color: #ed7209;
}
.support-item-title--green{
  background-color: #84a669;
}
.support-item-title--pink{
  background-color: #ff7bac;
}
.support-item-title--blue{
  background-color: #3b597a;
}

.triangle { /*三角アイコン*/
  height: 18px;
  aspect-ratio: cos(30deg);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  margin-right: 10px;
  margin-top: -5px;
}
.triangle--orange{
  background: linear-gradient(45deg, #fa6900, #fa6900);
}
.triangle--green{
  background: linear-gradient(45deg, #84a669, #84a669);
}
.triangle--pink{
  background: linear-gradient(45deg, #ff7bac, #ff7bac);
}
.triangle--blue{
  background: linear-gradient(45deg, #3b597a, #3b597a)
}

.service-button { /*「サービス一覧」リンク*/
  margin-top: 25px;
  display: flex;
  justify-content: end;
}
.service-button a {
  font-size: 22px;
  color: black;
  border-bottom: 1px solid black;
  transition: opacity 0.2s ease;
}
.service-button a:hover {
  opacity: 0.7; 
}


/*バナー*/
.banner-wrapper {
  background-color: #fffbd5;
}

.banner {
  display: flex;
  justify-content: space-around;
  padding: 60px 120px 60px 120px;
  gap: 30px 45px;
  max-width: 1102px;
  margin: 0 auto;
}
.banner a {
  max-width: 550px;
  min-width: 300px;
  width: 90%;
  transition: opacity 0.2s ease;
}
.banner a img {
  width: 100%;
  height: 100%;
}
.banner a:hover {
  opacity: 0.7; 
}


@media screen and (max-width: 1150px) {
  .example > img {
    opacity: 0.5;
  }
}

@media screen and (max-width: 910px) {
  .content-wrap > h2 {
    margin-right: 100px;
  }

  .banner {
    padding: 60px 10px;
  }
  .overview ul {
    padding: 0;
  }
  .overview a {
    font-size: 18px;
  }
  .content-wrap > img {
    top: 30px;
  }

  .orange-button{
    margin: 10px 0;
  }
}

@media screen and (max-width: 700px) {
  .image-frame{
    float: none;
    max-width: 100%;
    margin: 0 0 30px 0;
  }

  .content-wrap > p {
    margin-right: 20px !important;
  }
  .section-general h2,
  .overview h2,
  .content-wrap h2{
    font-size: 30px;
  }
  .overview h3,
  .example-title h3 {
    font-size: 28px;
  }
  .item-description h3{
    font-size: 18px;
    margin-bottom: 30px;
  }

  .content-wrap > h2 {
    margin-right: 0;
  }
  .content-wrap > img {
    width: 100px;
    top: 170px;
    right: -50px;
  }
  .content-yellow{
    padding: 1px 4.0vw 4.0vw;
  }
  .content-yellow h3 {
    margin: 4.0vw 0;
  }
  .content-yellow > img {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(10%, 50%);
    width: 100px;
    max-width: 100px !important;
  }

  .yellow-item{
    padding: 4.0vw !important;
    min-height: 134px;
  }

  .yellow-item .add-bold{
    font-size: 18px;
  }

  .overview-wrapper {
    padding: 50px 10px;
    contain: layout;
  }
  .overview{
    padding: 4.0vw;
  }
  .overview img{
    max-width: 30%;
  }
  .content-wrap {
    padding: 0 30px;
  }
  .mainvisual-left {
    position: absolute;
    right: 0;
  }
  .mainvisual-subtitle {
    margin-top: 50px;
  }
  .mainvisual-left h1 {
    font-size: 30px;
    color: rgb(255, 255, 255);
    line-height: 1.426;
    text-align: center;
    text-shadow: 0 0 6.37px rgba(0, 0, 0, 0.74),
      0 0 6.37px rgba(0, 0, 0, 0.74);
    margin: 0;
  }
  .mainvisual-right {
    width: 100%;
  }

  .mainvisual-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 20%
    );
    pointer-events: none; /* 画像がクリック可能なままにする */
  }
  
  .section-general{
    padding: 0 20px;
    margin-top: 30px;
  }

  .example {
    margin: 50px 20px;
    padding: 4.0vw;
  }

  .content-wrap p {
    margin-right: 0;
  }
  .overview ul {
    height: auto;
    padding: 0;
  }

  .section-title{
    margin-bottom: 40px;
  }

  .section-title::after{
    height: 2.5em !important;
    width: 2.5em !important;
    top: -0.5em !important;
    left: -0.5em !important;
  }

  .overview .section-title::after{
    left: -1em;
  }

  .yellow-item{
    display: block;
  }
  .yellow-list-icon{
    margin: 0 0 0 auto;
    min-width: 70px;
    height: fit-content;
    float: right;
    clear: both;
  }

  .check-list{
    padding: 4.0vw !important;
  }

  .space{
    display: block;
    float: right; 
    height: 5em; /* 仮の高さ */
    outline: 1px
  }

  .tilted img{
    transform: scale(0.7) rotate(20deg);
  }

  .banner {
    flex-wrap: wrap;
    padding: 60px 0;
  }
}

@media screen and (max-width: 450px) {
  .content-wrap > p {
    margin-right: 20px !important;
  }
  .section-title,
  .section-general h2,
  .overview h2,
  .content-wrap h2{
    font-size: 24px !important;
  }
  .overview h3,
  .example-title h3 {
    font-size: 22px;
  }

  .content-yellow h3 {
    font-size: 22px;
  }
}