@import url("https://use.typekit.net/wos8wqk.css");

:root {
  --col-background: #F8F2EE;
  --col-orange: #F18E1D;
  --col-white: #fff;
  --col-black: #1F1E1E;

  --col-textblack: #1F1E1E;
  --col-textorange: #F18E1D;
  --col-textwhite: #fff;
}

/* フォントサイズ指定 */

html {
  font-size: 62.5%;
}

body {
  font-size: calc(1.6rem + 0.18vw);
  font-family: "Zen Kaku Gothic New", sans-serif;
}

body p {
  color: var(--col-textgray);
  line-height: 2;
}

body h1 {
  font-size: calc(2rem + 1vw);
  line-height: 2;
  color: var(--col-textblack);
}

body h2 {
  font-size: calc(3rem + 1.2vw);
  color: var(--col-textblack);
  line-height: 1.4;
}

body h3 {
  font-size: calc(3rem + 0.2vw);
  color: var(--col-textblack);
}

body h4 {
  font-size: calc(2rem + 1.2vw);
}

body h5,
body h6 {
  font-size: calc(2rem + 1vw);
}

body img {
  width: 100%;
  height: auto;
}



@media screen and (max-width: 1024px) {
  body {
    font-size: 1.6rem;
  }
  body p {
    font-size: 1.6rem;
  }
  body h1 {
    font-size: 6.3125rem;
  }
  body h2 {
    font-size: 4.3125rem;
  }
  body h3 {
    font-size: 3.375rem;
  }
  body h4 {
    font-size: 2.125rem;
  }
  body h5, body h6 {
    font-size: 1.875rem;
  }
}


@media screen and (max-width: 770px) {
  body {
    font-size: 1.525rem;
  }
  body p {
    font-size: 1.6rem;
  }
  body h2 {
    font-size: 3.1875rem;
  }
  body h3 {
    font-size: 2.625rem;
  }
  body h4 {
    font-size: 1.875rem;
  }
  body h5, body h6 {
    font-size: 1.725rem;
  }
}


@media screen and (max-width: 640px) {
  body {
    font-size: 1.5rem;
  }
  body p {
    font-size: 1.5rem;
  }
  body h1 {
    font-size: 2.4rem;
  }
  body h2 {
    font-size: 3.4rem;
  }
  body h3 {
    font-size: 2.8rem;
  }
  body h4 {
    font-size: 1.5rem;
  }
  body h5,
  body h6 {
    font-size: 1.65rem;
  }
}

/*
@media screen and (max-width: 480px) {
  body {
    background: #b4b4a7;
    font-size: calc(1.3rem + 0.18vw);
  }
  body h2 {
    font-size: calc(1.25rem + 1.35vw);
  }
  body h3 {
    font-size: calc(1.25rem + 0.9vw);
  }
  body h4 {
    font-size: calc(1.25rem + 0.3vw);
  }
  body h5, body h6 {
    font-size: calc(1.5rem + 0.18vw);
  }
}
*/

/*コンテンツ間の高さ指定*/

body main .s1 {
  pointer-events: none;
  height: 30vh;
}

body main .s2 {
  pointer-events: none;
  height: 25vh;
}

body main .s3 {
  pointer-events: none;
  height: 20vh;
}

body main .s4 {
  pointer-events: none;
  height: 10vh;
}

body main .s5 {
  pointer-events: none;
  height: 5vh;
}

body main .s6 {
  pointer-events: none;
  height: 2.5vh;
}

@media screen and (max-width: 1024px) {
  body main .s1 {
    height: 300px;
  }
  body main .s2 {
    height: 250px;
  }
  body main .s3 {
    height: 200px;
  }
  body main .s4 {
    height: 100px;
  }
  body main .s5 {
    height: 50px;
  }
  body main .s6 {
    height: 25px;
  }
}


@media screen and (max-width: 640px) {
  body main .s1 {
    height: 100px;
  }
  body main .s2 {
    height: 80px;
  }
  body main .s3 {
    height: 60px;
  }
  body main .s4 {
    height: 80px;
  }
  body main .s5,
  body main .s6 {
    height: 20px;
  }
}

.sp-only {
  display: none;
}

@media screen and (max-width: 640px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}

/*body*/

body {
  background: var(--col-background);
}

/*component*/

.button {
    display: inline-block;
    padding: 1.2vw 3vw;
    width: 15vw;
    text-align: center;
    line-height: 1.2;
    border: 2px solid var(--col-textwhite);
    border-radius: 10rem;
    color: var(--col-textwhite);
    text-decoration: none;
    transition: 0.3s;
}

.button:hover{
    border: 2px solid var(--col-textorange);
    color: var(--col-textorange);
    background-color: var(--col-textwhite);
    transition: 0.3s;
}

.button-orange{
  display: inline-block;
  padding: 1.2vw 3vw;
  width: 15vw;
  text-align: center;
  line-height: 1.2;
  border: 2px solid var(--col-orange);
  border-radius: 10rem;
  color: var(--col-textorange);
  text-decoration: none;
  transition: 0.3s;
}

.button-orange:hover{
    border: 2px solid var(--col-textwhite);
    color: var(--col-textwhite);
    background-color: var(--col-textorange);
    transition: 0.3s;
}


.podcast_button {
    padding: calc(2rem + 0.2vw);
    border: 2px solid #DFDFDF;
    border-radius: 1rem;
    color: var(--col-textblack);
    background: var(--col-white);
    transition: 0.3s;
    text-decoration: none;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 41%;
}

.podcast_button.spotify img{
  width: calc(4rem + 0.2vw);
  height: calc(4rem + 0.2vw);
  margin-bottom: 1.2vw;
}
.podcast_button.amazon img{
  width: calc(7rem + 0.2vw);
  margin-bottom: 1.2vw;
}
.podcast_button.apple img{
  width: calc(4rem + 0.2vw);
  height: calc(4rem + 0.2vw);
  margin-bottom: 1.2vw;
}
.podcast_button.audible img{
  width: calc(10rem + 0.2vw);
  margin-bottom: 1.2vw;
}

.podcast_button:hover {
    background: var(--col-background);
    transition: 0.3s;
}

.header_button {
    padding: calc(1rem + 0.2vw) calc(2rem + 0.2vw);
    border: 2px solid #DFDFDF;
    border-radius: 10rem;
    color: var(--col-textorange);
    background: var(--col-white);
    transition: 0.3s;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header_button img{
  width: calc(2.6rem + 0.2vw);
  height: calc(2.6rem + 0.2vw);
  margin-left: 0.6vw;
}

.header_button:hover {
    background: var(--col-black);
    color: var(--col-textwhite);
    transition: 0.3s;
}

.sns_button {
    padding: calc(0.6rem + 0.2vw);
    border: 2px solid #DFDFDF;
    border-radius: 10rem;
    background: var(--col-black);
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sns_button img{
  width: calc(1rem + 0.2vw);
  height: calc(1rem + 0.2vw);
}

.sns_button:hover {
    background: var(--col-orange);
    transition: 0.3s;
}

.cta-contact{
  position: relative;
  display: flex;
  align-items: center;
  padding: 2vw 2vw;
  border: solid 2px #DFDFDF;
  background-color: var(--col-white);
  border-radius: 0.5vw;
  color: var(--col-textblack);
  text-decoration: none;
  transition: 0.3s;
}

.cta-contact::after {
  content: "";
  background-image: url(../images/contact-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: 2vw;
  top: 50%;
  transform: translateY(-50%);
}

.cta-contact:hover{
  background-color: var(--col-black);
  color: var(--col-white);
}

.category {
  padding: .1rem 1rem;
  font-size: calc(.8rem + 0.2vw);
  border: solid 1px var(--col-textblack);
  border-radius: 10vw;
}

@media screen and (max-width: 640px) {
  .button {
    padding: 5vw 6vw;
    width: 74vw;
  }

  .header_button {
    padding: calc(1rem + 0.2vw) calc(1.8rem + 0.2vw);
}

  .header_button img{
    width: calc(2rem + 0.2vw);
    height: calc(2rem + 0.2vw);
    margin-left: 2vw;
  }

  .sns_button {
    padding: calc(0.8rem + 0.2vw);
    display: inline-block;
}

  .sns_button img{
    width: calc(1.8rem + 0.2vw);
    height: calc(1.8rem + 0.2vw);
  }

  .podcast_button {
    padding: calc(2rem + 0.2vw);
    width: 35%;
  }

  .podcast_button.spotify img{
    margin-bottom: 4vw;
  }
  .podcast_button.amazon img{
    margin-bottom: 4vw;
  }
  .podcast_button.apple img{
    margin-bottom: 4vw;
  }
  .podcast_button.audible img{
    margin-bottom: 4vw;
  }

  .cta-contact{
    padding: 6vw 4vw;
    border-radius: 2vw;
  }
  .cta-contact::after {
    right: 4vw;
  }
}


/*header*/

header {
  display: flex;
  margin: 2vw 10vw 0 10vw;
  align-items: center;
  justify-content: space-between;
}

header .header-logo {
  width: 8vw;
}

header .header-right {
  display: flex;
  align-items: center;
}

header .header-right a{
  color: var(--col-textblack);
  text-decoration: none;
}

header .header-right a:nth-of-type(3){
  margin-right: 0;
}


@media screen and (max-width: 640px) {
  header {
  margin: 6vw 6vw;
  }
  header .header_left{
  display: block;
  }
  header .header_left .flex{
    display: flex;
    justify-content: start;
  }
  header .header_left p{
    font-size: 1.3rem;
  }
  header .header_left img{
  margin-right: 1.4vw;
  }
  header .header-logo {
    width: 16vw;
  }
}

/*kv*/

.kv .kv_inner{
  margin: 0 10vw;
  display: flex;
  justify-content: space-between;
}

.kv .kv_inner .img_wrap{
  width: 60vw;
  margin-right: 4vw;
}

.kv .kv_inner .text_wrap{
  width: 30vw;
}

.kv .kv_inner .text_wrap p{
  line-height: 2.4;
  font-weight: 700;
  width: 30vw;
  margin-top: 2vw;
}

.kv .kv_inner .text_wrap p span{
  color: var(--col-textorange);
}


@media screen and (max-width: 640px) {
  .kv .kv_inner{
    margin: 0 6vw;
    display: block;
  }
  .kv .kv_inner .img_wrap{
    width: 100%;
    margin-right: 0;
  }
  .kv .kv_inner .text_wrap{
    width: 100%;
    text-align: center;
  }
  .kv .kv_inner .text_wrap img{
    margin-top: 14vw;
    width: 80%;
  }
  .kv .kv_inner .text_wrap p{
    margin-top: 4vw;
    width: 100%;
    text-align: left;
  }
}

/*top_post*/

.top_post {
  background-color: var(--col-orange);
  border-radius: 6vw 6vw 0 0;
  padding-bottom: 6vw;
  position: relative; /* 親要素に相対的な位置を持たせる */
  display: flex; /* 子要素をフレックスコンテナにする */
  flex-direction: column; /* 子要素を縦方向に配置 */
}

.top_post .top_post-inner{
  margin: 0 10vw;
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.top_post .top_post-inner .sticky{
  position: sticky;
  top: 14vw;
}

.top_post .top_post-inner .text_wrap{
  width: 30vw;
  margin-right: 8vw;
}

.top_post .top_post-inner .text_wrap h2{
  color: var(--col-textwhite);
  margin-bottom: 3vw;
}

.top_post .top_post-inner .text_wrap .text{
  color: var(--col-textwhite);
  margin-bottom: 4vw;
}

.top_post .top_post-inner .radio_wrap{
  width: 50vw;
  text-align: right;
}

.top_post .top_post-inner .radio_wrap .post{
  margin-bottom: 4vw;
}
.top_post .top_post-inner .radio_wrap .post:nth-child(2){
  margin-bottom: 0;
}
.top_post .top_post-inner .radio_wrap .post .post_header{
  font-size: 2.2rem;
}
.top_post .top_post-inner .radio_wrap .post iframe{
  margin-bottom: 2vw;
}
.top_post .top_post-inner .radio_wrap .button{
  margin-top: 4vw;
}
.podcast-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2vw;
}

.podcast-wrap .podcast_button{
  margin-right: 2vw;
}

.podcast-wrap .podcast_button:nth-child(2){
  margin-right: 0;
}


/*
.top_post .top_post-inner .radio_wrap .post .post_header{
  display: flex;
  justify-content: space-between;
  border-bottom: solid 2px var(--col-textwhite);
  margin-bottom: 2vw;
  padding-bottom: .4vw;
}
*/

.top_post .top_post-inner .post_header {
  font-size: 2.2rem;
  display: flex;
  justify-content: space-between;
  border-bottom: solid 2px var(--col-white);
  color: var(--col-textwhite);
  margin-bottom: 6vw;
  padding-bottom: .4vw;
}

.top_post .top_post-inner .post_header p:first-of-type::before {
  content: '';
  display: inline-block;
  width: .6em;
  height: .6em;
  background-color: var(--col-white);
  border-radius: 50%;
  margin-right: 0.3em; /* 文字と丸の間に少しスペースを作る */
  margin-bottom: 0.2em;
  vertical-align: middle; /* 丸を文字の中央に揃える */
}


.top_post .top_post-inner .radio_wrap .post .post_header p{
  color: var(--col-textwhite);
}

.broadcast_schedule {
  background-color: var(--col-white);
  padding: 1vw 2vw;
  border-radius: .5vw;
}

.broadcast_schedule-inner {
  display: flex;
  align-items: center;
}

.broadcast_schedule-inner .flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.broadcast_schedule-inner img{
  width: calc(1.6rem + 0.4vw);
  margin-right: .8vw;
}

.broadcast_schedule-inner .day{
  padding: .6vw .6vw;
  font-size: 1.4rem;
  line-height: 1;
  display: inline-block;
  background-color: var(--col-orange);
  color: var(--col-textwhite);
  margin-right: .8vw;
}

.broadcast_schedule-inner p{
  color: var(--col-textblack);
}




@media screen and (max-width: 640px) {
  .top_post .top_post-inner{
    margin: 0 6vw;
    display: block;
  }
  .top_post .top_post-inner .text_wrap{
    width: 100%;
    margin-right: 0;
    margin-bottom: 20vw;
  }
  .podcast-wrap {
    margin-bottom: 4vw;
  }
  .top_post .top_post-inner .text_wrap h2{
    margin-bottom: 6vw;
  }
  .top_post .top_post-inner .radio_wrap{
    width: 100%;
  }
  .top_post .top_post-inner .radio_wrap .post{
    margin-bottom: 8vw;
  }
  .top_post .top_post-inner .radio_wrap .post .post_header{
    margin-bottom: 6vw;
    padding-bottom: .8vw;
  }
  .top_post .top_post-inner .radio_wrap .post iframe{
    margin-bottom: 4vw;
  }
  .broadcast_schedule {
    background-color: var(--col-white);
    padding: 3vw 6vw;
    border-radius: 1vw;
  }
  .broadcast_schedule-inner img{
    margin-right: 1.6vw;
  }

  .broadcast_schedule-inner .day{
    margin-right: 1.6vw;
  }

}



/*top_member*/

.top_member{
  background-color: var(--col-background);
  border-radius: 6vw 6vw 0 0; /* .top_postと同じ角丸にする */
  margin-top: -6vw; /* .top_memberを上にずらして重ねる */
  position: relative;
  z-index: 2;
}

.top_member .top_member-inner{
  margin: 0 10vw;
}

.top_member .top_member-inner .member_header{
  font-size: 2.2rem;
}

.top_member .top_member-inner .member_header {
  font-size: 2.2rem;
  display: flex;
  justify-content: space-between;
  border-bottom: solid 2px var(--col-orange);
  color: var(--col-textorange);
  margin-bottom: 6vw;
  padding-bottom: .4vw;
}

.top_member .top_member-inner .member_header p:first-of-type::before {
  content: '';
  display: inline-block;
  width: .6em;
  height: .6em;
  background-color: var(--col-orange);
  border-radius: 50%;
  margin-right: 0.3em; /* 文字と丸の間に少しスペースを作る */
  margin-bottom: 0.2em;
  vertical-align: middle; /* 丸を文字の中央に揃える */
}

.top_member .top_member-inner .flex{
  display: flex;
  justify-content: space-between;
}

.top_member .top_member-inner .text_wrap .flex{
  justify-content: center;
  align-items: center;
}

.top_member .top_member-inner .text_wrap .title_wrap{
  margin-bottom: 2.6vw;
}

.top_member .top_member-inner .text_wrap .sub-text{
  width: 40vw;
}

/*
.top_member .top_member-inner .text_wrap .x-icon{
  width: 2vw;
  height: 2vw;
  margin-right: 0;
  margin-left: 1vw;
}
*/

.top_member .top_member-inner .member_wrap{
  margin-top: 6vw;
}

.top_member .top_member-inner .member_wrap .text_wrap{
  margin-right: 0;
}

.top_member .top_member-inner .member_wrap ul{
  display: flex;
  justify-content: space-between;
}

.top_member .top_member-inner .member_wrap ul li{
  width: 24vw;
  margin-bottom: 3vw;
  text-align: center;
}

.top_member .top_member-inner .member_wrap ul li p{
  text-align: left;
}

.top_member .top_member-inner .member_wrap .member_img{
  width: 15vw;
  height: 15vw;
  margin-bottom: 1.6vw;
}

.top_member .top_member-inner .member_wrap h3{
  margin-right: 0.6vw;
}

@media screen and (max-width: 640px) {
  .top_member .top_member-inner{
    margin: 0 6vw;
  }
  .top_member .top_member-inner .member_header{
    margin-bottom: 12vw;
    padding-bottom: .6vw;
  }
  .top_member .top_member-inner .flex{
    display: block;
  }
  .top_member .top_member-inner .text_wrap{
    width: 100%;
    margin-right: 0;
    margin-bottom: 10vw;
  }
    .top_member .top_member-inner .text_wrap h2{
    margin-bottom: 6vw;
  }
  .top_member .top_member-inner .text_wrap .sub-text{
    width: 100%;
  }
  .top_member .top_member-inner .member_wrap {
    width: 100%;
  }
  .top_member .top_member-inner .member_wrap ul li{
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 10vw;
  }
  .top_member .top_member-inner .member_wrap ul li:nth-child(3){
    margin-bottom: 0;
  }
  .top_member .top_member-inner .member_wrap ul li .text_wrap{
    margin-bottom: 4vw;
  }
  .top_member .top_member-inner .member_wrap ul{
    display: block;
  }
  .top_member .top_member-inner .member_wrap .member_img{
    width: 70%;
    height: auto;
    margin-right: 0;
    margin-bottom: 6vw;
  }
  .top_member .top_member-inner .member_wrap h3{
    margin-bottom: 4vw;
  }
  .top_member .top_member-inner .text_wrap .x-icon{
    width: 10vw;
    height: 10vw;
    margin-left: 0;
  }
  .top_member .top_member-inner .member_wrap ul li p{
    text-align: left;
  }
}


/*top_article*/

.top_article {
  background-color: var(--col-white);
  border-radius: 6vw 6vw 0 0;
  padding-bottom: 6vw;
  position: relative; /* 親要素に相対的な位置を持たせる */
  display: flex; /* 子要素をフレックスコンテナにする */
  flex-direction: column; /* 子要素を縦方向に配置 */
}

.top_article .top_article-inner{
  margin: 0 10vw;
  text-align: right;
}

.top_article .top_article-inner .article_header {
  font-size: 2.2rem;
  display: flex;
  justify-content: space-between;
  border-bottom: solid 2px var(--col-orange);
  color: var(--col-textorange);
  margin-bottom: 6vw;
  padding-bottom: .4vw;
}

.top_article .top_article-inner .article_header p:first-of-type::before {
  content: '';
  display: inline-block;
  width: .6em;
  height: .6em;
  background-color: var(--col-orange);
  border-radius: 50%;
  margin-right: 0.3em; /* 文字と丸の間に少しスペースを作る */
  margin-bottom: 0.2em;
  vertical-align: middle; /* 丸を文字の中央に揃える */
}

.top_article .top_article-inner .text_wrap h2{
  color: var(--col-textblack);
  margin-bottom: 3vw;
}

.top_article .top_article-inner ul li{
  margin-bottom: 2vw;
}

.top_article .top_article-inner .button-orange{
  margin-top: 2vw;
}

.article-post{
  position: relative;
  display: flex;
  align-items: center;
  padding: 2vw 2vw;
  border: solid 2px #DFDFDF;
  border-radius: 0.5vw;
  color: var(--col-textblack);
  text-decoration: none;
  transition: 0.3s;
}

.article-post .title{
  font-weight: bold;
}

.article-post::after {
  content: "";
  background-image: url(../images/arrow-right.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: 2vw;
  top: 50%;
  transform: translateY(-50%);
}

.article-post:hover{
  background-color: rgb(245, 245, 245);
}

.top_article ul li a p{
  margin-right: 1.4vw;
}


@media screen and (max-width: 640px) {
  .top_article .top_article-inner{
    margin: 0 6vw;
  }
  .top_article .top_article-inner .flex{
    display: block;
  }
  .top_article .top_article-inner .text_wrap{
    width: 100%;
    margin-right: 0;
  }
  .top_article .top_article-inner .article_header{
    margin-bottom: 12vw;
    padding-bottom: .6vw;
  }
  .top_article .top_article-inner .text_wrap{
    margin-bottom: 10vw;
  }
  .top_article .top_article-inner .text_wrap h2{
    margin-bottom: 14vw;
  }
  .top_article .top_article-inner .text_wrap .button{
    margin-bottom: 6vw;
  }
}



/*top_goods*/

.top_goods {
  background-color: var(--col-orange);
  border-radius: 6vw 6vw 0 0;
  padding-bottom: 6vw;
  position: relative; /* 親要素に相対的な位置を持たせる */
  display: flex; /* 子要素をフレックスコンテナにする */
  flex-direction: column; /* 子要素を縦方向に配置 */
  margin-top: -6vw;
  z-index: 2;
}

.top_goods .top_goods-inner{
  margin: 0 10vw;
}

.top_goods .top_goods-inner .goods_header{
  font-size: 2.2rem;
}

.top_goods .top_goods-inner .goods_header {
  font-size: 2.2rem;
  display: flex;
  justify-content: space-between;
  border-bottom: solid 2px var(--col-white);
  color: var(--col-textwhite);
  margin-bottom: 6vw;
  padding-bottom: .4vw;
}

.top_goods .top_goods-inner .goods_header p:first-of-type::before {
  content: '';
  display: inline-block;
  width: .6em;
  height: .6em;
  background-color: var(--col-white);
  border-radius: 50%;
  margin-right: 0.3em; /* 文字と丸の間に少しスペースを作る */
  margin-bottom: 0.2em;
  vertical-align: middle; /* 丸を文字の中央に揃える */
}

.top_goods .top_goods-inner .flex{
  display: flex;
  justify-content: space-between;
}


.top_goods .top_goods-inner .text_wrap{
  width: 30vw;
  margin-right: 8vw;
}

.top_goods .top_goods-inner .text_wrap h2{
  color: var(--col-textwhite);
  margin-bottom: 3vw;
}

.top_goods .top_goods-inner .text_wrap .button{
  margin-bottom: 2vw;
}

@media screen and (max-width: 640px) {
  .top_goods .top_goods-inner{
    margin: 0 6vw;
  }
  .top_goods .top_goods-inner .flex{
    display: block;
  }
  .top_goods .top_goods-inner .text_wrap{
    width: 100%;
    margin-right: 0;
  }
  .top_goods .top_goods-inner .goods_header{
    margin-bottom: 12vw;
    padding-bottom: .6vw;
  }
  .top_goods .top_goods-inner .text_wrap{
    margin-bottom: 10vw;
  }
  .top_goods .top_goods-inner .text_wrap h2{
    margin-bottom: 14vw;
  }
  .top_goods .top_goods-inner .text_wrap .button{
    margin-bottom: 6vw;
  }
}



/*top_contact*/

.top_contact {
  background-color: var(--col-background);
  border-radius: 6vw 6vw 0 0;
  padding-bottom: 6vw;
  position: relative; /* 親要素に相対的な位置を持たせる */
  display: flex; /* 子要素をフレックスコンテナにする */
  flex-direction: column; /* 子要素を縦方向に配置 */
  margin-top: -6vw;
  z-index: 2;
}

.top_contact .top_contact-inner{
  margin: 0 10vw;
}

.top_contact .top_contact-inner .contact_header{
  font-size: 2.2rem;
}

.top_contact .top_contact-inner .contact_header {
  font-size: 2.2rem;
  display: flex;
  justify-content: space-between;
  border-bottom: solid 2px var(--col-orange);
  color: var(--col-textorange);
  margin-bottom: 6vw;
  padding-bottom: .4vw;
}

.top_contact .top_contact-inner .contact_header p:first-of-type::before {
  content: '';
  display: inline-block;
  width: .6em;
  height: .6em;
  background-color: var(--col-orange);
  border-radius: 50%;
  margin-right: 0.3em; /* 文字と丸の間に少しスペースを作る */
  margin-bottom: 0.2em;
  vertical-align: middle; /* 丸を文字の中央に揃える */
}

.top_contact .top_contact-inner .flex{
  display: flex;
  justify-content: space-between;
}


.top_contact .top_contact-inner .text_wrap{
  width: 30vw;
  margin-right: 8vw;
}

.top_contact .top_contact-inner .text_wrap h2{
  color: var(--col-textblack);
  margin-bottom: 3vw;
}

.top_contact .top_contact-inner .top_contact-right{
  width: 50vw;
}

.top_contact .top_contact-inner .text_wrap .button{
  margin-bottom: 2vw;
}

@media screen and (max-width: 640px) {
  .top_contact .top_contact-inner{
    margin: 0 6vw;
  }
  .top_contact .top_contact-inner .flex{
    display: block;
  }
  .top_contact .top_contact-inner .text_wrap{
    width: 100%;
    margin-right: 0;
  }
  .top_contact .top_contact-inner .contact_header{
    margin-bottom: 12vw;
    padding-bottom: .6vw;
  }
  .top_contact .top_contact-inner .text_wrap{
    margin-bottom: 10vw;
  }
  .top_contact .top_contact-inner .text_wrap h2{
    margin-bottom: 14vw;
  }
  .top_contact .top_contact-inner .text_wrap .button{
    margin-bottom: 6vw;
  }
  .top_contact .top_contact-inner .top_contact-right{
    width: 100%;
  }
}





/*footer*/

footer {
  background-color: var(--col-black);
  border-radius: 6vw 6vw 0 0; /* .top_postと同じ角丸にする */
  margin-top: -6vw; /* .top_memberを上にずらして重ねる */
  position: relative;
  z-index: 2;
}

.footer-inner {
  margin: 0 10vw;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-top: 4vw;
  padding-bottom: 4vw;
}

.footer-inner p{
  color: var(--col-textwhite);
}

.footer-inner .footer-sns a{
  margin-right: .6vw;
}

.footer-inner .footer-sns a:nth-child(3){
  margin-right: 0;
}

.footer-inner .footer-sns .flex{
  display: flex;
  justify-content: flex-end;
  margin-bottom: .6vw;
}

.footer-inner small {
  color: var(--col-textwhite);
  font-size: calc(1.2rem + 0.2vw);
}

@media screen and (max-width: 640px) {
  .footer-inner {
    margin: 0 6vw;
    display: block;
    padding-top: 8vw;
    padding-bottom: 8vw;
    text-align: center;
  }

  .footer-inner .footer-sns a{
    margin-right: 2vw;
  }
  .footer-inner a {
    display: inline-block;
    margin-bottom: 8vw;
  }

.footer-inner .footer-sns .flex{
  justify-content: center;
  margin-bottom: 0;
}
}