@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');


*,
*:before,
*:after {
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 font-feature-settings: "palt";


}



.alternate {
 font-family: "alternate-gothic-no-3-d", sans-serif;
 letter-spacing: 0;
 font-weight: 600;
}



body {
 margin: 0 auto;
 font-size: 16px;
 font-family: "roboto", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
 font-feature-settings: "palt";
 color: #333;


 position: relative;
}

#fade {
 background: #e7fff5;
 background-image: url(../img/pattern.png);
 background-size: 250px 250px;
 background-blend-mode: multiply;
}




.serif {
 font-family: "游明朝体", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
}


ul,
ol {
 list-style-type: none;
 padding: 0;
 margin: 0;
}


a {
 transition: 0.3s;
 font-weight: 600;
 text-decoration: underline;
}

a:hover {}



p {
 margin-top: 20px;
 line-height: 1.6;
}

p.ex {
 margin-top: 0;
}

p.ex2 {
 margin-top: 10px;
 ;
}

.tate {
 writing-mode: vertical-rl;
 text-orientation: mixed;
 line-height: 2;
 letter-spacing: 0;
}



.tate .left-1 {
 display: inline-block;
 transform: translateX(1px);
}

.tate .left-2 {
 display: inline-block;
 transform: translateX(2px);
}




.tate .right {
 display: inline-block;
 transform: translateX(-2px);
}

.center {
 text-align: center;
}


img {
 max-width: 100%;
}



.drawer_menu {
 display: none;
}




.gray {
 background-color: #fff;
 background-image: url(../img/pattern.png);
 background-size: 250px 250px;
 background-blend-mode: normal;
}


.white {
 position: relative;
 background-color: #fff;
 z-index: 0;
 overflow: hidden;
}

.white::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: url(../img/pattern.png);
 background-size: 250px 250px;
 opacity: 0.4;
 /* 薄さの調整はここで */
 pointer-events: none;
 z-index: -1;
}


.white.ex::before {
 opacity: 0.3;

}


/*----------------------------*/

.header-nav {
 display: flex;
 align-items: center;
 padding: 20px 30px;
}

.header-nav a {
 text-decoration: none;
}


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


.header-nav .logo img {
 height: 60px;
}

.header-nav .logo span {
 margin-left: 30px;
 font-size: 22px;
}


.header-nav .info {
 margin-left: auto;
}

.header-nav .info a {
 margin-left: 30px;
}



.main-visual {
 width: 1100px;
 margin: 0 auto;
 margin-top: 60px;
 margin-bottom: 100px;
}





.hero-text {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 2rem 1rem;
}

.char-row {
 display: flex;
 justify-content: center;
 gap: 1rem;
}

.char-box {
 display: inline-block;
 font-size: 300px;
 font-weight: bold;
 color: #fff;
 position: relative;
 overflow: hidden;
 width: 300px;
 height: 300px;
 text-align: center;
 line-height: 300px;
}

.char-box span {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 text-align: center;
 transform-origin: center;
 transition: opacity 0.4s ease, transform 0.4s ease;
}

/* フェードアウト＋縮小 */
.char-box .out {
 transform: scale(0.8);
 opacity: 0;
}

/* フェードイン＋拡大（初期） */
.char-box .in {
 transform: scale(1.2);
 opacity: 0;
}

/* 表示状態 */
.char-box .active {
 transform: scale(1);
 opacity: 1;
}

/* 左右反転 */
.char-box .in.flip-x {
 transform: scale(1.2) scaleX(-1);
}

.char-box .active.flip-x {
 transform: scale(1) scaleX(-1);
}

/* 90度回転 */
.char-box .in.rotate-90 {
 transform: scale(1.2) rotate(90deg);
}

.char-box .active.rotate-90 {
 transform: scale(1) rotate(90deg);
}





.sub-box {
 width: 90%;
 max-width: 1300px;
 margin: 0 auto;
 display: flex;
 align-items: center;
 padding-bottom: 60px;
}


.link-wrap {
 display: flex;
 align-items: center;
}

.btn {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 280px;
 height: 60px;
 border-radius: 20px;
 background: #fff;
 text-decoration: none;
 position: relative;
 margin-right: 20px;
}




.btn i {
 font-size: 20px;
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
}

.btn .podcast {
 height: 30px;
 padding-right: 10px;
}

.btn .voicy {
 height: 40px;
 padding-right: 10px;
}

.sub-copy {
 margin-left: auto;
 font-size: 65px;
 font-weight: 600;
 color: #333;
}


/*----------------------------*/



.basic-wrap {
 padding: 90px 0;
 margin: 0 auto;
 width: 1200px;
}

.basic-wrap.ex {
 padding-top: 30px;
}


.mid-wrap {
 padding: 90px 0;
 margin: 0 auto;
 width: 1000px;
}

.mid-wrap.ex {
 padding-top: 30px;
}


.slim-wrap {
 padding: 90px 0;
 padding-top: 30px;
 margin: 0 auto;
 width: 900px;
}




.message-box {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.message-box p {
 font-size: 19px;
 line-height: 2.8;
 font-weight: 600;
 margin-top: 0;
}


.title-1 {
 font-size: 75px;
 line-height: 1.5;
 letter-spacing: -5px;
}



.title-2 {
 font-size: 35px;
 line-height: 1.5;
}

.title-3 {
 font-size: 28px;
 line-height: 1.5;
}

.title-4 {
 font-size: 20px;
 font-weight: 600;
 margin-bottom: 30px;
}




.box-title {
 display: block;
 width: fit-content;
 border: 2px solid #000;
 padding: 5px 10px;
 padding-bottom: 2px;
 font-size: 16px;
 letter-spacing: 1px;
}





.box-title.center {
 margin: 0 auto;
 margin-bottom: 20px;
}






.act-list {
 display: flex;
}

.act-list.ex {
 flex-direction: column;
}



.act-list .item {
 display: block;
 width: 25%;
 text-align: center;
 text-decoration: none;
}



.act-list.ex .item {
 width: 100%;
 margin-bottom: 30px;
}





.act-list .item .tn {
 background: #ddd;
 aspect-ratio: 1 / 1;
 width: 100%;

}

.act-list.ex .item .tn {
 border-radius: 10px 10px 0 0;
}


.act-list .item .tn.one {
 background-image: url(../img/tn-coaching-sq.jpg);
 background-size: cover;
 background-position: 50%;
}

.act-list .item .tn.two {
 background: #fff;
 background-image: url(../img/mirai-logo.png);
 background-size: 60%;
 background-repeat: no-repeat;
 background-position: 50%;
}

.act-list .item .tn.three {
 background-image: url(../img/podcast-tn.png);
 background-size: cover;
 background-position: 50%;
}


.act-list .item .tn.four {
 background: #fff;
 background-image: url(../img/voicy-logo.png);
 background-size: 50%;
 background-repeat: no-repeat;
 background-position: 50%;
}



.act-list .item span {
 display: block;
 padding: 10px;
 background: gray;
}


.act-list.ex .item span {
 border-radius: 0 0 10px 10px;
}



.act-list .item span.one {
 background: #5e3405;
 color: #fff;
}


.act-list .item span.two {
 background: #000;
 color: #fff;
}

.act-list .item span.three {
 background: #2cae7c;
 color: #fff;
}

.act-list .item span.four {
 background: #e26128;
 color: #fff;
}



/*----------------------------*/


.info-wrap {
 display: flex;
}

.update-box {
 padding: 70px;
 width: 33%;
}


.update-box .list {
 margin-top: 20px;
}


.update-box .item {
 display: flex;
 align-items: baseline;
 margin-bottom: 30px;
 font-size: 15px;
}


.update-box .item:last-child {
 margin-bottom: 0;
}

.update-box .item p {
 margin-top: 0;

}

.update-box .item span {
 margin-right: 10px;
 font-weight: bold;
}




.profile-box {
 padding: 70px;
 width: 67%;
 position: relative;
}



.profile-box .info {
 width: 75%;
 padding-bottom: 60px;
 margin-top: 20px;
}


.profile-box img {
 width: 26%;
 right: 10px;
 bottom: 0;
 position: absolute;
}


.profile-box p:last-child {
 font-weight: bold;
}



.profile-box .name {
 margin-top: 30px;
 text-align: right;
}



.btn-wrap {
 margin-top: 20px;
}


.btn-wrap a {
 margin-right: 20px;
 font-size: 17px;
}


.btn-wrap a:last-child {
 margin-right: 0;

}



/*----------------------------*/


footer {
 width: 100%;
 padding: 5%;
}


footer.ex {
 padding: 0 5%;
 padding-bottom: 5%;
}


footer .inner {
 width: 100%;
 margin: 0 auto;
 padding: 40px 50px;
 background: #fff;
 border-radius: 20px;
 display: flex;
 align-items: center;
 background-image: url(../img/txt-back-2.png);
 background-size: cover;
 background-position: center;
}

footer .logo {
 display: flex;
 align-items: center;
 margin-right: auto;
}


footer .logo img {
 height: 40px;
 margin-right: 20px;
}


footer .logo span {
 font-weight: bold;
}



footer a {
 margin-left: 20px;
}

footer .copyright {
 text-align: right;
 color: #666;
 margin-top: 10px;
}



/*----------------------------*/



.pankuzu {
 display: flex;
 margin-bottom: 15px;
}


.pankuzu a {
 text-decoration: none;

}

.pankuzu i {
 padding: 5px;
 margin-top: 3px;
 font-weight: bold;
}


.cont-box {
 display: flex;
 justify-content: space-between;
}


.cont-box.ex {
 display: block;
}


article {
 width: 900px;
 background: #fff;
 border-radius: 10px;
 position: relative;
}






.logo-big-gray {
 position: absolute;
 max-width: 90%;
 top: 520px;
 left: 0;
 right: 0;
 margin: auto;
}


.side-bar {
 width: 250px;
}



article .tn {
 border-radius: 10px 10px 0 0;
}

article .info {
 width: 550px;
 margin: 0 auto;
 padding-bottom: 90px;
 position: relative;
 z-index: 1;
}


article .info.ex {
 width: 750px;
}



article .info .wrap {
 margin-top: 60px;
}




article h2 {
 margin-top: 30px;
}


article .overview {
 margin: 0 auto;
 margin-top: 40px;
}


iframe.player {
 margin-top: 45px;
}


.notice {
 font-size: 14px;
 color: blue;
 font-weight: bold;
}


.bi-box-arrow-up-right {
 padding-left: 5px;
}




.message-wrap {
 width: 1000px;
 background: #fff;
 border-radius: 10px;
 padding: 90px;

}


.message {
 position: relative;
 width: 100%;
 height: 800px;
}


.message .txt {
 width: 700px;
 height: 800px;
 position: relative;
 margin: 0 auto;
}


.message h2 {
 font-size: 60px;
 position: absolute;
 right: 0;
 line-height: 1.5;
}

.message p {
 line-height: 2.5;
 font-size: 17px;
 position: absolute;
 left: 0;
 bottom: 0;
 font-weight: 600;
}



@keyframes slow-rotate {
 from {
  transform: rotate(0deg);
 }

 to {
  transform: rotate(360deg);
 }
}

.message .head {
 width: 80%;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 opacity: 0.6;
 animation: slow-rotate 60s linear infinite;
}


.profile-wrap {
 margin-top: 90px;
 position: relative;
}

.profile-wrap .info {
 width: 80%;
 border: 1px solid #ddd;
 padding: 45px;
 padding-right: 50px;
 border-radius: 20px;
 font-size: 14px;
}


.profile-wrap img {
 position: absolute;
 width: 250px;
 right: -50px;
 bottom: 0;
}

.profile-wrap h3 {
 font-size: 24px;
 font-weight: 600;
}






form {
 width: 750px;
 margin: 0 auto;
 font-size: 15px;
 padding-bottom: 60px;
}



form .title-2 {
 margin-top: 30px;
}

form .txt {
 font-size: 16px;
 width: 600px;
 margin: 0 auto;
 margin-top: 10px;
}


form .wrap {
 margin-top: 30px;
}

form label {
 width: 100%;
 background: #6a8778;
 border: 1px solid #6a8778;
 color: #fff;
 text-align: center;
 height: 50px;
 font-weight: 600;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 45%;
}

form .item {
 display: flex;
 align-items: center;
 margin: 0 auto;
 margin-bottom: 20px;
}

.item.message,
.item.radio {
 align-items: flex-start;
 height: auto;
}


form input {
 width: 55%;
 line-height: 50px;
 background: #fff;
 padding: 0 20px;
}

textarea {
 width: 55%;
 height: 200px;
 padding: 10px;
 font-size: 15px;
 background: #fff;
}

form button {
 text-align: center;
 display: block;
 margin: 0 auto;
 background: #6a8778;
 color: #fff;
 width: 300px;
 height: 60px;
 font-weight: 600;
 border-radius: 50px;
 cursor: pointer;
 border: 0px;
 margin-top: 50px;
 font-size: 16px;
}

::placeholder {
 font-size: 15px;
 color: #bbb;
}


.radio .inner {
 width: 55%;
 display: flex;
 flex-direction: column;
 padding: 30px;
 font-weight: 500;
 background: #fff;
}

.radio .inner {
 height: 230px;
}

.radio .inner.ex {
 height: 145px;
}

.radio span {
 margin-left: 5px;
}


.radio .inner.ex {
 flex-direction: row;
 flex-wrap: wrap;
}

.radio .inner div {
 display: flex;
 line-height: 2;
 align-items: center;
}


.radio .inner.ex div {
 margin-right: 20px;
}

.radio.label {
 height: 230px;
}

.radio.ex.label {
 height: 145px;
}



.message.label {
 width: 45%;
 height: 200px;
}



.check {
 width: 20px;
 margin-bottom: 3px;
}




.label-btn {
 display: block;
 width: 40px;
 height: 20px;
 line-height: 20px;
 background: #F95F00;
 color: #fff;
 font-size: 12px;
 border-radius: 3px;
 margin-left: 10px;
}

.label-btn.ex {
 background: #eee;
 color: #999;
}




.flex-box {
 width: 80%;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 60px;
}


.flex-box.ex {
 flex-direction: row-reverse;
}



.flex-box img {
 width: 45%;
 height:
}

.flex-box .txt {
 width: 50%;
}

.gray-back {
 background: #f2f2f2;
 padding: 90px;
}


.white-back {
 background: #fff;
 padding: 90px;
}


.column-box {
 margin: 0 auto;
 width: 600px;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}


.column-box.ex {
 width: 100%;
}


.column-box .item {
 width: 45%;
 margin-bottom: 60px;
}

.column-box.ex .item {
 width: 30%;
 margin-bottom: 0;
}


.column-box .item h3 {
 text-align: center;
 font-weight: 600;
 font-size: 20px;
}

.column-box .item img {
 margin-bottom: 30px;
}


.title-set {
 margin-bottom: 60px;
}

.title-set h2 {
 font-size: 40px;
 font-weight: normal;
}

.title-set span {
 font-weight: 600;
}


.box-btn {
 padding: 10px;
 border: 2px solid #000;
 text-decoration: none;
 display: block;
 width: 150px;
 text-align: center;
 margin: 0 auto;
 margin-top: 40px;
}

/*----------------------------*/



.under-line {
 position: relative;
 display: inline-block;
 text-decoration: none;
}

.under-line.ex {
 position: relative;
 display: inline-block;
 text-decoration: none;
}

.under-line::after {
 position: absolute;
 bottom: -9px;
 left: 0;
 content: '';
 width: 100%;
 height: 2px;
 background: #000;
 transform: scale(0, 1);
 transform-origin: center top;
 transition: transform .2s;
}

.under-line.ex::after {
 background: #000;
}

.under-line:hover::after {
 transform: scale(1, 1);
}



.anm-fade_up,
.anm-fade_left,
.anm-fade_right,
.anm-fade_down,
.anm-fade_here {
 opacity: 0;
}

.animated {
 opacity: 1;
}

.anm-fade_up {
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.anm-fade_left {
 transform: translateX(-30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.anm-fade_right {
 transform: translateX(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.anm-fade_down {
 transform: translateY(-30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.anm-fade_here {
 transform: translate(0);
 transition: opacity 0.8s ease, transform 0.8s ease;
}


.animated.anm-fade_up,
.animated.anm-fade_left,
.animated.anm-fade_right,
.animated.anm-fade_down,
.anm-fade_here {
 transform: translateY(0);

}

.animated.anm-fade_left {
 transform: translateX(0);
}

.animated.anm-fade_right {
 transform: translateX(0);
}

.animated.anm-fade_down {
 transform: translateY(0);
}


.thanks {
 height: 100vh;
 position: relative;

}


.thanks .inner {
 width: 400px;
 height: 120px;
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 margin: auto;
}

.thanks a {
 display: block;
 text-align: center;
 margin-top: 10px;
}






/*----------------------------*/




.sp {
 display: none;
}

.tab {
 display: none;
}

.pc {
 display: block;
}
