/* ===============================================
Base
=============================================== */

/*
  Default Style
----------------------------------------------- */
html{
	font-size: 62.5%;/*16px×62.5%=10px*/
}
body {
  font-family: 'Noto Sans JP', '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, sans-serif;
  line-height: 1.5;
  font-size: 1.6rem;
  letter-spacing: 0.025rem;
  color: #333;
}
a{
	color: #333;
}
*:focus {
  outline: none;
}
h2,h3 {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Meiryo UI', 'メイリオ', Meiryo, sans-serif;
  font-weight: 700;
}
img {
  vertical-align: bottom;
	max-width: 100%;
	height: auto;
}
::selection
{
    background: #000000;
    color: #ffffff;
}

/* for Firefox */
::-moz-selection
{
    background: #000000;
    color: #ffffff;
}
/*
  common Style
----------------------------------------------- */
h2 {
  font-size: 4rem;
  text-align: center;
  margin-bottom: 8px;
}
h3 {
  font-size: 3.6rem;
  text-align: center;
  position: relative;
  margin-bottom: 120px;
}
h3::before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 100px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #FF9900;
  border-radius: 2px;
}
h4{
  font-size: 2.4rem;
  margin-bottom: 40px;
  text-align: center;
  /*
  padding: 0.25em 0.5em;
  background: transparent;
  border-left: solid 5px #FF9900;
  display: inline-block;
 */
}
.subtitle {
  text-transform: uppercase;
  color: #FF9900;
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 48px;
}
.background-color-primary{
  background-color: #FCFADB;
}
.background-color-secondary{
  background-color: #F8EFEF;
}
.background-color-tertiary {
  background-color: #F5EDCB;
}
.background-color-footer{
  background-color: #EFC26D;
}

/*
  Button
----------------------------------------------- */
.button1 {
  color: #fff;
  height: auto;
  font-size: 1.5rem;
  line-height: 1.1;
  max-width: 240px;
  min-width: 180px;
  padding: 14px;
  display: block;
  border-radius: 10px 30px 30px 10px;
  text-align: center;
  background-size: 180% auto;
  transition: all .3s ease-out;
  margin: 0 0 0 auto;
}
.button1:hover {
  background-position: right center;
}
.button2 {
  font-size: 1.5rem;
  display: block;
  border-radius: 6px;
  padding: 10px 16px;
  background: #99CC00;
  color: #fff;
}
.button2:hover {
  transform: scale(0.95);
}
.button3 {
  font-size: 2.4rem;
  display: block;
  margin: 0 auto;
  padding: 30px 10px;
  border-radius: 6px;
  width: 60%;
  color: #fff;
  text-align: center;
  background-size: 180% auto;
  transition: all .3s ease-out;
  margin-bottom: 56px;
}
.button3:hover {
  background-position: right center;
}
.button4 {
  color: #fff;
  background: #FF9900;
  height: auto;
  font-size: 1.5rem;
  line-height: 1.1;
  max-width: 240px;
  min-width: 180px;
  padding: 14px;
  display: block;
  border-radius: 30px 30px;
  text-align: center;
  margin: 0 auto;
}
.gradient1 {
  background-image: -moz-linear-gradient(linear, left top, right top, from(#FF9900), to(#F6D365));
  background-image: -webkit-linear-gradient(left, #FF9900 0%, #F6D365 100%);
  background-image: linear-gradient(to right, #FF9900 0%, #F6D365 100%);
}
.gradient2{
  background-image: -moz-linear-gradient(left, #98C70C 0%, #DFFA4B 100%);
  background-image: -webkit-linear-gradient(left, #98C70C 0%, #DFFA4B 100%);
  background-image: linear-gradient(to right, #98C70C 0%, #DFFA4B 100%);
}
.fa-angle-right {
  margin-left: 20px;
}
.fa-angle-left {
  padding-right: 8px;
}
.fa-play-circle {
  padding-right: inherit;
}

/*
  Centering
----------------------------------------------- */
.container {
  max-width: 960px;
  margin: 0 auto;
}
.container-secondary {
  margin: 0 auto;
  padding: 0 4%;
}
.container-white {
  max-width: 70%;
  margin: 0 auto;
  background-color: #fff;
  padding: 72px;
}
.container-beige {
  margin: 0 auto;
  max-width: 960px;
  background-color: #F5EDCB
}

/*
  Section
----------------------------------------------- */
.section{
  padding: 160px 0 80px;
}
.section-secondary {
  padding: 96px 0;
}
.section-teritary {
  padding: 160px 0 224px;
}
.section-contact {
  padding: 160px 0 80px;
}
/*
  Page top button
----------------------------------------------- */
#content{
  position: relative;
  z-index: 100;
}
#topBtn {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

/*
  Navigation
----------------------------------------------- */
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px,1px,1px,1px);
}
.logo{
  max-width: 160px;
  padding: 16px 0;
}
.header-container {
  position: fixed;
  z-index: 99;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  left: 0; /* 追加 */
  right: 0; /* 追加 */
}
.header_inner {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 95%;
  align-items: center;
  max-width: 1440px;
}
.sp-only {
  display: none;
}
.nav-bg {
  display: none;
}

.header-fixed-top.scrolled {
  background: rgba(255,255,255,0.9);
}
.header-nav{
  display: flex;
  padding: 24px 0;
  align-items: center;
  position: relative;
}
.header-nav > li {
  position: relative;
  text-decoration: none;
}
.gnav-01::before {
  content: "";
  position: absolute;
  right: 42%;
  bottom: -13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF9900;
  transform: scale(0, 1);
  transition: transform .2s;
}
.gnav-01:hover::before {
  transform: scale(1);
}
.current ::before {
  content: "";
  position: absolute;
  right: 42%;
  bottom: -13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF9900;
  transition: top .7s cubic-bezier(.09,.47,.27,1.01);
}
.header-nav li{
  margin-left: 24px;
}


/* ===============================================
HOME
=============================================== */

/*
  hero
----------------------------------------------- */
.hero-main {
  display: flex;
  padding: 8% 0 0;
  position: relative;
  max-width: 1233px;
  margin: 0 auto;
}
.hero-img {
  max-width: 52%;
  object-fit: contain;
}
.hero-right {
  padding-top: 136px;
  position: relative;
}
.hero-message {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 6rem;
  position: absolute;
}

.hero-message_base {
  display: inline-block;
  background-color:#F8F2DC;
  padding: 10px 10px 8px;
  margin-bottom: 10px;
  line-height: 94%;
  white-space: nowrap;
}
.hero-message01{
  margin-left: -2%;
}
.hero-message02{
  margin-left: 2%;
}
.hero-message03{
  margin-left: 6%;
}
.hero-blog{
  position: absolute;
  bottom: 20px;
  left: auto;
  right: 0;
}
.hero-intro{
  font-size: 1.6rem;
  text-align: center;
  margin: 24px 0;
}

.hero-intro h2 {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
  font-size: 1.6rem;
  letter-spacing: 0.025rem;
}

/*
  about
----------------------------------------------- */
.button_sp {
  display: none;
}
.about {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  margin-top: -50px;
  padding-top: 100px;
  padding-bottom: 50px;
}


.about-contents {
  margin-top: 100px;
  background-color: #fff;
  width: 53%;
  padding: 7%;
}
.about-img {
  max-width: 47%;
}
.background-text_about{
  background-image: url(../images/home/about-back.png);
	background-position:  left top;
	background-repeat: no-repeat;
  background-size:auto;
  background-clip: padding-box;
}
.about-contents_intro {
    text-align: center;
    font-weight: 700;
    margin-bottom: 24px;
  }
.about-contents-large{
  font-size: 2rem;
  padding: 80px 0;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}
.large-word_container {
  margin-bottom: 8px;
}
.about-contents-large > .large-word_container:first-of-type ::before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  border-top: 1px solid #009a44;
  border-right: 1px solid #009a44;
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  position: absolute;
  bottom: 57%;
  left: 0;
}

.about-contents-large > .large-word_container:last-of-type ::after {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  border-top: 1px solid #009a44;
  border-right: 1px solid #009a44;
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  position: absolute;
  bottom: 20%;
  right: 2%;
}
.about-contents-large span {
  font-size: 2.4rem;
  font-weight: 600;
}
.button{
  display: flex;
  justify-content: space-around;
  margin-top: 24px;
}




.about-container {
  display: flex;
}





/*
  What I can
----------------------------------------------- */
.background-text_whatican{
  background-image: url(../images/home/whatican-back.png);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: auto;
  background-clip: padding-box;
}
.whatican {
  position: relative;
  margin-bottom: 152px;
}
.whatican-img {
  width: 70%;
}
.whatican:nth-child(odd) .whatican-img {
  display: block;
  margin-left: auto;
}
.panel {
  right: 10%;
  padding: 24px 32px;
  opacity: 1;
  z-index: 1;
  width: 35%;
  position: absolute;
  top: 14%;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 106px rgba(0, 0, 0, 0.13);
  box-shadow: 0px 0px 106px rgba(0, 0, 0, 0.13);
}
.whatican:nth-child(odd) .panel {
  left: 3%;
}
.space {
  margin-right: 16px;
}


/*
  News
----------------------------------------------- */
figure {
  text-align: center;
    background-color: #fff;
}

.blog-link {
  color: #FF9900;;
  font-weight: bold;
  }


.background-text_news{
  background-image: url(../images/home/news-back.png);
  background-position:  left top;
	background-repeat: no-repeat;
  background-size:auto;
  background-clip: padding-box;;
}
.news_intro {
  text-align: center;
  margin-bottom: 24px;
}
.news{
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 1140px;
  margin: 0 auto;
}
.grid-item {
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.news_contents {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto;
}
.news_contents_item {
  display: inline-block;
  width: 30%;
  margin-bottom: 60px;
  vertical-align: top;
  margin: 0 auto;
}
.news_text_container {
  background-color: #fff;
  padding: 16px;
  height: 224px;
  margin-bottom: 32px;
}
.news_date{
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.news_title{
  font-weight: bolder;
  margin-bottom: 16px;
}
.news_text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
/*
  Profile
----------------------------------------------- */
.background-text_profile{
  background-image: url(../images/home/profile-back.png);
  background-position:  right top;
	background-repeat: no-repeat;
  background-size:auto;
  background-clip: padding-box;
}
.profile {
  display: flex;
}
.profile_img_container {
  position: relative;
}
.profile_img {
  position: relative;
  margin: 0 3%;
}
.small-round {
  background: #FF9900;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  position: absolute;
  left: calc(30% - 150px);
  bottom: 60px;
}
.profile-panel {
  margin: 110px 30px;
}
.profile_name{
  font-size: 2rem;
  margin-bottom: 20px;
}
.profile_detail{
  margin-bottom: 40px;
}
/*
  Contact
----------------------------------------------- */
.contact {
  text-align: center;
  margin: 0 auto;
}
.complete {
  text-align: center;
  margin-bottom: 40px;
}
.thanks_text {
  margin-bottom: 24px;
}
.thanks_text_top {
  font-weight: 700;
  font-size: 2.4rem;
}
.complete-img {
  width: 200px;
}
.thanks_confirm {
    width: 60%;
    margin: 0 auto;
    background-color: #EAE5E5;
    padding: 24px 64px;
    margin-bottom: 40px;
}


/* ===============================================
FOOTER
=============================================== */
#footer{
  background-color: #EFC26D;
}
.footer_container {
  margin: 0 auto;
}
.footer_menu {
  width: 68%;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  padding: 40px 0;
  justify-content: space-around;
}
.footer_contents {
  text-align: center;
  padding: 24px 0 0;
  margin: 0 auto;
}
.footer_row {
  width: 21%;
}
.mb6 {
  margin-bottom: 6px;
}
.mb24 {
  margin-bottom: 24px;
}
.copyright {
  font-size: 1.4rem;
  text-align: center;
}
.banner {
  width: 100px;
}
.footer_title {
  font-weight: 700;
}

.footer_contact_img {
  max-width: 90px;
  margin: 0 auto;
}
.footer_contents {
  background-color: #FF9900;
}
.privacy {
  margin: 0 auto;
  margin-top: 8px;
  font-size: 1.4rem;
}
.footer_logo {
  text-align: center;
}
.roll {
  -webkit-animation: roll 2.5s linear 0s 1;
  animation: roll 2.5s linear 0s 1;
}

    @-webkit-keyframes roll {
      0%   { -webkit-transform: translate(0%, 0%); }
      5%   { -webkit-transform: translate(10%, 0%) rotate(10deg); }
      25%  { -webkit-transform: translate(20%, 0%) rotate(20deg); }
      30%  { -webkit-transform: translate(-10%, 0%) rotate(-10deg); }
      35%  { -webkit-transform: translate(-15%, 0%) rotate(-15deg); }
      45%  { -webkit-transform: translate(10%, 0%) rotate(10deg); }
      50%  { -webkit-transform: translate(15%, 0%) rotate(15deg); }
      60%  { -webkit-transform: translate(-5%, 0%) rotate(-5deg); }
      65%  { -webkit-transform: translate(-7%, 0%) rotate(-7deg); }
      75%  { -webkit-transform: translate(0%, 0%) rotate(0deg); }
      100% { -webkit-transform: translate(0%, 0%) rotate(0deg); }
    }
    @keyframes roll {
      0%   { transform: translate(0%, 0%); }
      5%   { transform: translate(10%, 0%) rotate(10deg); }
      25%  { transform: translate(20%, 0%) rotate(20deg); }
      30%  { transform: translate(-10%, 0%) rotate(-10deg); }
      35%  { transform: translate(-15%, 0%) rotate(-15deg); }
      45%  { transform: translate(10%, 0%) rotate(10deg); }
      50%  { transform: translate(15%, 0%) rotate(15deg); }
      60%  { transform: translate(-5%, 0%) rotate(-5deg); }
      65%  { transform: translate(-7%, 0%) rotate(-7deg); }
      75%  { transform: translate(0%, 0%) rotate(0deg); }
      100% { transform: translate(0%, 0%) rotate(0deg); }
    }

/* ===============================================
PROFILE
=============================================== */

/*
  Profile-hero
----------------------------------------------- */
.profile_hero_container {
  position: relative;
  top: 184px;
  margin-bottom: 182px;
}
.profile_hero {
  top: -40px;
  background-image: url(../images/profile/intro-round.png);
  background-repeat: no-repeat;
  background-position: center;
  height: 680px;
  color: #fff;
  position: relative;
  background-size: contain;
}
.profile_hero_text {
  text-align: center;
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
}
.profile_hero_text_title h3 {
  margin-bottom: 16px;

}
.profile_hero_text_title02 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.profile_hero_text_main {
  font-size: 1.5rem;
  width: 90%;
  margin: 0 auto;
  line-height: 1.75;
}

/*
  Profile-detail
----------------------------------------------- */
.background-text_profile {
  background-image: url(../images/profile/profile-back.png);
  background-position: right top;
	background-repeat: no-repeat;
  background-size:auto;
  background-clip: padding-box;
}
.profile_detail_img {
  width: 480px;
  padding-bottom: 40px;
  margin: 0 auto;
}
.profile_detail_title {
  margin-bottom: 16px;
    text-align: center;
}
.profile_detail_text_container {
  margin-bottom: 32px;
  line-height: 1.7;
}
.profile_detail_text_furigana {
  font-size: 1.2rem;
}
.profile_detail_text_name {
  font-size: 2rem;
  font-weight: 600;
}
.profile_detail_text {
  margin: 0 auto;
  max-width: 580px;
}
/* Voice Sample */
.voice-sample {
  max-width: 240px;
  margin: 0 auto;
  text-align: center;
}

.voice-sample p {
      position: relative;
    display: inline-block;
    padding: 0 35px;
}
.voice-sample p::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-130deg);
}
.voice-sample p::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 97%;
  display: inline-block;
  width: 45px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-53deg);
}

.voice-sample p::after {
  right: 0;
}

.audiojs audio{
  display: none;
}
.audiojs {
  color: #fff;
  background: #FF9900;
  height: auto;
  font-size: 1.5rem;
  line-height: 1.1;
  max-width: 240px;
  min-width: 180px;
  padding: 13px 22px;
  display: block;
  border-radius: 30px 30px;
  text-align: center;
  margin: 0 auto;
  box-shadow: none;
}

/*再生・停止ボタン*/
.audiojs .play-pause {
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0 8px;
  float: left;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 14px;
}
/*再生・停止ボタンなどのp要素*/
.audiojs p {
  display: none;
  width: 24px;
  height: 24px;
  margin: 0px;
  cursor: pointer;
}
.audiojs .play {
  display: block;
}
/*進行状態・ロードの状態を表示する部分(グレー)*/
.audiojs .scrubber {
  position: relative;
  float: left;
  width: 40px;
  background: #5a5a5a;
  height: 4px;
  margin: 12px 0 0 0px;
  border-top: 0;
  border-left: 0px;
  border-bottom: 0px;
  overflow: hidden;
}

/*進行状態を表示するバーの部分(薄いグレー)*/
.audiojs .progress {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 4px;
  width: 0px;
  background: #444444;
  z-index: 1;
}
/* ロード状態を表示するバーの部（黒） */
.audiojs .loaded {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 4px;
  width: 0px;
  background: #DDDDDD;
}

/*現在の再生時間/総再生時間フォント*/
.audiojs .time {
  float: left;
  height: 28px;
  line-height: 28px;
  margin: 0px 0px 0px 8px;
  padding: 0px 0px 0px 0px;
  border-left: none;
  color: #fff;
  text-shadow: none;

}
/*現在の再生時間フォント*/
.audiojs .time em {
  padding: 0px 2px 0px 0px;
  color: #fff;
  font-style: normal;

}
/*時間の部分*/
.audiojs .time strong {
  padding: 0px 0px 0px 2px;
  font-weight: normal;

}
.audiojs .error-message {
  float: left;
  display: none;
  margin: 0px 10px;
  height: 26px;
  width: 200px;
  overflow: hidden;
  line-height: 26px;
  white-space: nowrap;
  color: #fff;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -icab-text-overflow: ellipsis;
  -khtml-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}
.audiojs .error-message a {
  color: #eee;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid #999;
  white-space: wrap;
}
/*再生ボタン*/
.audiojs .play {
  background: url(../images/profile/button_play_img.svg) center center no-repeat;
  background-position-x: -3px;
}
/*読み込み中ボタン*/
.audiojs .loading {
  display: none;
}
/*エラーボタン*/
.audiojs .error {
  display: none;
}
/*停止ボタン*/
.audiojs .pause {
  background: url(../images/profile/button_stop_img.svg) center center no-repeat;
  background-position-x: -4px;
}
.playing .play, .playing .loading, .playing .error {
  display: none;
}
.playing .pause {
  display: block;
}
.loading .play, .loading .pause, .loading .error {
  display: none;
}
.loading .loading {
  display: block;
}
.error .time, .error .play, .error .pause, .error .scrubber, .error .loading {
  display: none;
}
.error .error {
  display: block;
}
.error .play-pause p {
  cursor: auto;
}
.error .error-message {
  display: block;
}


/*
  History
----------------------------------------------- */
.background-text_history {
  background-image: url(../images/profile/history-back.png);
  background-position: left top;
	background-repeat: no-repeat;
  background-size:auto;
  background-clip: padding-box;
}
.history_main {
  display: flex;
  flex-direction: row-reverse;
  padding-bottom: 6px;
}
.history_main_even {
  display: flex;
  flex-direction: row;

}
.history_01 {
  position: relative;
  margin-top: -58px;
  min-height: 400px;
}
.history_circle {
  position: relative;
  left: 52%;
}
.history_01 h4 {
  color: #fff;
  width: 140px;
  display: block;
  text-align: center;
  position: absolute;
  top: 31%;
  right: 26%;
}
.history_img {
  max-width: 450px;
}
.history_container {
  margin-bottom: 102px;
  min-height: 449px;
  position: relative;
}
.history_badge {
  position: absolute;
  z-index: 10;
}
.history_02_line {
  margin-left: 0;
  height: 187px;
  top: -152px;
  width: 2px;
  height: 200px;
  display: block;
  position: absolute;
  top: -155px;
  background-color: #3b2646;
  z-index: 1;
}
.history_badge_even {
  top: -41px;
  left: 290px;
}
.history_badge_odd {
  top: -35px;
  right: 287px;
}
.history_text {
  padding: 120px 16px;
}
.history_text_title {
  font-weight: 600;
  margin-bottom: 16px;
}
.history_line {
  display: inline-block;
  position: absolute;
  width: 2px;
  background-color: #3b2646;
}
.history_02 .history_line {
  margin-left: 0;
  height: 187px;
  top: -146px;
}
.history_container_odd .history_line {
  height: 227px;
  left: 46%;
  -webkit-transform: skew(135deg);
  top: -203px;
  transform: skew(135deg);
}
.history_container_even .history_line {
  height: 188px;
  right: 50%;
  top: -176px;
  -webkit-transform: skew(45deg);
  transform: skew(45deg);
}

.underline {
  border-bottom: dotted 2px #FF9900;
}
.history_text_extra_container {
  background-color: #fff;
  width: 70%;
  border-radius:39px 12px 39px 12px ;
  margin: 5% 20%;
}
.history_text_extra {
  padding: 7% 19%;
}
.history_text_extra_01 {
  margin-bottom: 16px;
}
.history_text_extra_title {
  font-size: 2rem;
  font-weight: 600;
  margin-right: 16px;
}
.history_text_extra_title::before {
  content: "";
  position: relative;
  top: 3px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FF9900;
  margin-right: 6px;
}

/*
  Experience
----------------------------------------------- */
.experience_container {
  display: flex;
  justify-content: space-between;
}
.background-text_experience {
  background-image: url(../images/profile/experience-back.png);
  background-position: right top;
	background-repeat: no-repeat;
  background-size: 22%;
  background-clip: padding-box;
}

.experience_contents {
  width: 31%;

}

.experience_contents_list > dd::before {
    font-family: "Font Awesome 5 Free";
  content: "\f0da";
  color: gray; /*アイコン色*/
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: bold;
}
.experience_contents_list:last-child {
  content: "";
}
.experience_contents_titles {
  text-align: center;
  margin-bottom: 24px;
}
.experience_contents_title {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 600;
  font-size: 2.4rem;
  margin-bottom: 8px;
  margin: 0 10%;
}
.experience_contents_subtitle {
  text-transform: uppercase;
  color: #7B7878;
}
.experience_contents_details_title {
  font-weight: 600;
}
.experience_contents_details_title::before {
  content: "";
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FF9900;
    margin-right: 6px;
}
.experience_contents_details_subtitle {
  font-weight: 600;
}
.experience_content_img {
  width: 50%;
  margin: 0 25%;
  margin-bottom: 24px;
}
.experience_contents_details_01 {
  margin-bottom: 24px;
}
.onair {
  display: inline-block;
  background: #34c083;
  color: #fff;
  border-radius: 3px;
  font-size: 1rem;
  padding: 1px 5px;
  margin-right: 6px;
}

/* ===============================================
Lecture
=============================================== */
.titles p {
  text-transform: uppercase;
  color: #000;
}
.whatican_top {
  padding-top: 159px;
  z-index: 4;
}
.box1 {
    padding-top: 15vh;
    position: relative;
    width: 84vw;
    z-index: 1;
}
.layer {
    width: 100%;
    margin: 0 19%;
    padding-top: 31%;
    margin-bottom: 109px;
    background-color: #FF9900;
}
.picture {
    position: absolute;
    top: -40vw;
    right: 8vw;
    width: 76vw;
    background-image: url(../images/whatican/whatican-lecture.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.picture:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 150%;
    pointer-events: none;
}
.intro_text_container {
  text-align: center;
  line-height: 1.7;
}
.intro_text_title {
  font-size: 2rem;
  margin-bottom: 32px;
}

/*
  Theme
----------------------------------------------- */
.theme-dt {
  font-weight: 600;
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}
.theme-dt::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #FF9900;
  position: absolute;
  left: 0;
  top: 2px;
}
.theme-dd {
  margin: 8px 24px 32px;
}
.theme-dl {
  margin-bottom: 40px;
}
.theme-bottom {
  text-align: center;
}
.dt {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}
.dt::before {
  position: absolute;
  content: "Q";
  top: 0;
  left: 2px;
  font-family: 'Roboto', sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  color: #FF9900;
}
.dd {
  position: relative;
  padding-left: 24px;
  margin: 8px 0 32px;
}
.dd::before {
  position: absolute;
  content: "A";
  top: 0;
  left: 2px;
  font-family: 'Roboto', sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  color: #99CC2D;
}
.dd:last-child {
  margin-bottom: 0;
}

/* ===============================================
Class
=============================================== */
.picture2 {
    position: absolute;
    top: -40vw;
    right: 8vw;
    width: 76vw;
    background-image: url(../images/whatican/whatican-class.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.picture2:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 150%;
    pointer-events: none;
}

/* ===============================================
Emcee
=============================================== */
.picture3 {
    position: absolute;
    top: -40vw;
    right: 8vw;
    width: 76vw;
    background-image: url(../images/whatican/whatican-emcee.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.picture3:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 150%;
    pointer-events: none;
}


/* ===============================================
Contact
=============================================== */

.container-beige h3 {
  text-align: center;
}
.contact_flow {
  margin-bottom: 40px;
}
.flow {
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin: 0 auto;
  font-size: 1.4rem;
}
.flow li {
  position: relative;
  line-height: 1.714;
  text-align: center;
}
.flow li + li::before {
  top: 97px;
  left: -64px;
  width: 33px;
  height: 28px;
  content: "";
  display: block;
  position: absolute;
  background: url(../images/whatican/whatican-contact-arrow.png) no-repeat;
  background-size: contain;
}
.flow img {
  max-width: 112px;
}
.flow p {
  margin-bottom: 8px;
}

/*
  Contact Form
----------------------------------------------- */
.contact-form_container {
  max-width: 840px;
  margin: auto;
  padding-top: 35px;
}
.contact-form {
  border-top: 1px solid #cccccc;
  max-width: 840px;
  display: table;
  margin: 0 auto;
  margin-bottom: 40px;
}
.mgr-06 {
  margin-right: 6px;
}
.contact-form > dl {
  display: table-row;
}
.contact-form > dl > dt {
  display: table-cell;
  vertical-align: middle;
  width: 288px;
  padding: 17px 20px 16px;
  background: #F5EDCB;;
  color: #000;
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: 1px;
  line-height: 1.6;
  border-bottom: 1px solid #cccccc;
}
.contact-form > dl > dd {
  display: table-cell;
  width: 320px;
  padding: 13px 10px 12px;
  border-radius: 3px;
  color: #333333;
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: 1px;
  line-height: 1.6;
  border-bottom: 1px solid #cccccc;;
}
.contact-form > dl > dd > p {
  color: #646363;
  font-size: 1.3rem;
}
.must {
  display: inline-block;
  background: #FF1A00;
  color: #FFF;
  border-radius: 3px;
  font-size: 10px;
  padding: 1px 5px;
  letter-spacing: 0.2em;
  float: right;
}
.input {
  width: 300px;
  height: 40px;
}
textarea {
  width: 100%;
}
.contact_confirm {
  width: 83%;
  margin: 0 auto;
  background-color: #EEEE;
  padding: 24px 64px;
  margin-bottom: 40px;
}
.contact_radio {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-left: 28px;
}
.contact_radio input {
  display: none;
}
.radio-selecter {
  margin-bottom: 4px;
}
.radio-mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  border: solid 2px #d4dae2;
  background-color: #fff;
  border-radius: 50%;
  box-sizing: border-box;
}
/* 選択時に重ねる円 */
.radio-mark:after {
  content: "";
  position: absolute;
  background: #2e80ff;
  border-radius: 50%;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  opacity: 0;
}
/* 選択時に重ねた円の透明を解除 */
.contact_radio input:checked + .radio-mark:after {
  opacity: 1;
}
.button_container {
  text-align: center;
}
.privacy_container {
  text-align: center;
  margin-bottom: 16px;
}
.text_decoration {
  color: #2e80ff;
  font-weight: 700;
}
.submit {
  display: inline-block;
  background: #7DA700;
  width: 300px;
  height: 60px;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 60px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

/* 送信ボタン - 押せないとき */

input[type="submit"][disabled] {
background-color: #ccc;
cursor: default;
}

/* チェックボタンを大きく */
input[type=checkbox] {
  transform: scale(1.5);
}


/* ===============================================
Column
=============================================== */

/*
  Colums
----------------------------------------------- */
.picture4 {
  position: absolute;
  top: -40vw;
  right: 8vw;
  width: 72vw;
  left : 0;
  background-image: url(../images/column/column.jpg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.picture4:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 150%;
  pointer-events: none;
}

.tag {
  display: flex;
  margin-bottom: 16px;
}
.tag_list {
  margin-right: 16px;
}
.tag :last-of-type {
  margin-right: 0;
}
.column_contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.column_contents_item {
  width: 48%;
  margin-bottom: 60px;
  vertical-align: top;
  background-color: #fff;
}
.column_contents_item h4 {
  text-align: left;
  font-size: 2rem;
  margin-bottom: 16px;
}
.column_text_container {
  padding: 20px;
}
.column_text_list {
  margin-bottom: 16px;
}
.column_tag_bottom {
  display: inline-block;
  margin: 0 20px 16px;
}
.column_tag {
  color: #587600;
}
.column_tag:hover {
  color: #73b3a2;
  transition: color .3s;
}

.column_contents_item img {
  transition: .3s;
}
.column_contents_item img:hover {
  transition: .3s;
}

/* ===============================================
Column Details
=============================================== */
.breadcrumb {
  margin: 0;
  padding: 0 3% 5%;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #555;
  font-size: 1.4rem;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}


.column_container {
  width: 80%;
  margin: 0 auto;
}
.column_text {
  padding: 32px;
  background-color: #fff;
  margin-bottom: 32px;
  line-height: 1.75;
}
.column_top {
  margin-bottom: 16px;
}
.pagenation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 120px;
  position: relative;
}
.icon_right,.icon_left {
  color: #FF9900;
}
.column-top-page ::before {
  content: '';
  position: absolute;
  bottom: -8px;
  display: inline-block;
  width: 95px;
  height: 3px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #FF9900;
  border-radius: 2px;
}
.tag_container {
  margin-bottom: 32px;
}
.section-column {
  padding: 0 64px;
}

/*
  Colum Scroll
----------------------------------------------- */
/* .swiper-slide {
  background-color: #fff;
  height: auto;

}
.swiper-slide img {
  vertical-align: bottom;
}

.scroll_text_container {
  padding: 11px;
  font-size: 1.4rem;
}
.scroll_text_title {
  font-weight: 600;
}
.scroll_text {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.swiper-slide > .column_tag {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.scroll_item {
  padding: 8px;
}
.swiper-container {
  max-width: 100%;
  margin: 30px 0;
}
.swiper-container,
.swiper-slide {
  height: 600px
}
.swiper-slide {
  position: relative;
  overflow: hidden;
}
.swiper-slide > img {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  min-width: 100%;
  min-height: 100%;
}*/
.swiper-parent {
	position: relative;
}
.swiper-controller {
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: -2rem;
    right: 12%;
}
/*  前・次スライドボタンの縦位置調整（スライドの高さの中央に合わせる） */
 .swiper-button-prev, .swiper-button-next {
	top: calc((100% - 50px) * 0.5);	/* ☆★ページネーション・スクロールバー（50px）を除く縦位置の中央（＝スライドの高さの中央）に一旦配置 */
  margin-top:-22px;			/* ★ボタンの高さ（44px）の半分のネガティブマージンで上に少しずらす */
}
.swiper-button-prev,
.swiper-button-next {
  width: 32px;
  height: 32px;
  margin-top: -16px;
}


.tag_container_scroll {
  margin: 0 0 2% 5%;
}
.swiper-container {
    overflow: visible;
}
.scroll_item {
  position: relative;
  width: 100%
}
.column_link {
  display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    font-size: 0;
}

.swiper_img {
      -webkit-transition: -webkit-transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition: -webkit-transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, -webkit-transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    padding-bottom: 132%;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.swiper_img::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.6)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
}
.scroll_text {
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;

}
.scroll_text_title  {
  color: #fff;
  font-weight: 600;
  font-style: normal;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  font-size: 1.4rem;
  line-height: 1.5;
  -webkit-line-clamp: 3;
}

.column_tag_bottom_list {
  color: #ecb745;
  font-size: 1.2rem;
}
/* ===============================================
Contact
=============================================== */
.picture5 {
    position: absolute;
    top: -40vw;
    right: 8vw;
    width: 76vw;
    background-image: url(../images/whatican/contact.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.picture5:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 150%;
    pointer-events: none;
}

/* ===============================================
PRIVACY POLICY
=============================================== */
.privacy-text_container {
  margin-bottom: 24px;
  word-break: break-all;
  width: 90%;
  margin: 0 auto 24px;
}
.privacy-text_container a {
  text-decoration: underline;
}
.privacy-text_details {
  margin: 16px;
}



/* ===============================================
SP
=============================================== */
@media screen and (max-width: 1232px) {
  .hero-main {
    padding: 12% 5%;
    max-width: 900px;
  }
  .hero-right {
    padding-top: 32px;
  }
  _::-webkit-full-page-media, _:future, :root .hero-right {
    padding-top: 0;
  }
  .hero-message {
    font-size: 5rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    }
  _::-webkit-full-page-media, _:future, :root .hero-message {
    font-size: 5rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: initial;
    }
  .hero-message01 {
    margin-left: 2%;
  }
}

@media screen and (max-width: 989px) {
/*   .section {
    padding: 80px 0 80px;
  } */
/*
  header
----------------------------------------------- */
.sp-only {
  display: block;
}
.pc-only {
  display: none;
}
/* ***********************************************************
* #global-nav
* *********************************************************** */
.open .global-nav {
  z-index: 1000;
  visibility: visible;
}
.global-nav {
  visibility: hidden;
  position: fixed;
  display: table;
  vertical-align: middle;
  color: #fff;
  top: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  margin-left: -5%;
}
.header-nav{
  display: block;
  margin: 0 auto;
  padding: 24px;
  align-items: self-end;
  position: relative;
}

.global-nav ul {

    vertical-align: middle;
    margin: 10% auto;
    max-width: 320px;
}
.global-nav a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 6px 0;
}
.button2 {
  width: 200px;
  text-align: center;
  margin: 24px 0;
  font-size: 2rem;
}
/* ***********************************************************
* nav-list
* *********************************************************** */
.header-nav li {
  margin: 0 auto;
}
.gnav-01::before {
  content: none
}

.global-nav ul li {
  font-size: 2rem;
  opacity: 0;
  -webkit-transform: scaleX(0) translateX(-260px);
  transform: scaleX(0) translateX(-260px);
  -webkit-transition: none;
  transition: none;
  text-align: left;
  padding: 0 40px;
  margin-bottom: 8px;
}
.open .global-nav ul li {
  opacity: 1;
  -webkit-transform: scaleX(1) translateX(0);
  transform: scaleX(1) translateX(0);

  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;

  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}
.open .global-nav ul li:nth-child(2) {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
.open .global-nav ul li:nth-child(3) {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
.open .global-nav ul li:nth-child(4) {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}
.open .global-nav ul li:nth-child(5) {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}
.fa-external-link-alt {
  padding-left: 16px;
}

/* ***********************************************************
* #nav-bg
* *********************************************************** */
.nav-bg {
  content: "";
  width: 2400px;
  height: 2400px;
  margin-right: -1200px;
  margin-top: -1200px;
  top: 40px;
  right: 40px;
  display: block;
  position: fixed;
  background: #17A669;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(.02);
  transform: scale(.02);

  }
  .open .nav-bg {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .6s ease-out;
  transition: all .6s ease-out;
  }
  .current ::before {
    right: 93%;
    bottom: 26%;
    width: 16px;
    height: 16px;
  }
  /* ***********************************************************
  * #nav-toggle
  * *********************************************************** */
  .nav-toggle {
  display: block;
  position: fixed;
  right: 11px;
  top: 21px;
  width: 58px;
  height: 30px;
  cursor: pointer;
  padding: 10px 11px;
  z-index: 1001;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  }

  .nav-toggle div {
  position: relative;
  }
  .nav-toggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  left: 0;
  zoom: 1;
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  }

  .nav-toggle span:nth-child(1) {
  top: 0;
  }
  .nav-toggle span:nth-child(2) {
  top: 8px;
  }
  .nav-toggle span:nth-child(3) {
  top: 16px;
  }
  .open .nav-toggle {
  background: transparent;
  }
  .open .nav-toggle span {
  background: #fff;
  }

  .open .nav-toggle span:nth-child(1) {
  top: 9px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  zoom: 1;
  }
  .open .nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
  }
  .open .nav-toggle span:nth-child(3) {
  top: 9px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  zoom: 1;
  }

  body {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 3rem;
  }
  h3 {
    font-size: 2.8rem;
    margin-bottom: 64px;
  }
  .pc {
    display: none;
  }
  .container {
    width: 90%;
  }

  .button {
  flex-direction: column;
  }
  .button1 {
    color: #fff;
    height: 66px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2.4;
    min-width: 217px;
    padding: 14px;
    display: block;
    text-align: center;
    background-size: 180% auto;
    border-radius: 0;
    transition: all .3s ease-out;
    margin: 0 auto;
    margin-bottom: 16px;
  }
  .gradient1 {
    background-image: -webkit-linear-gradient(left, #FF9900 0%, #F6D365 70%);
    background-image: linear-gradient(to right, #FF9900 0%, #F6D365 70%);
  }
.button2 {
  font-weight: 700;
  }
  .button3 {
  font-weight: 700;
  }
  .button4 {
  font-weight: 700;
}
/*
  Header
----------------------------------------------- */
  .header-container {
    padding: 6px 16px;
  }
  .logo {
    max-width: 120px;
  }

  /*
  About
----------------------------------------------- */
  .section-teritary {
    padding: 64px 0;
  }
  .background-text_about {
    background-image: none;
  }
  .about {
    flex-direction: column-reverse;
    position: relative;
    margin-top: -100px;
  }
  .about-img {
    min-width: 100%;
    margin: 0 auto;
  }
  .about-contents {
    width: calc(100% - 30px);
    margin: 0 auto;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    margin-top: -138px;
    padding: 13% 7%;
    z-index: 1;
  }
  .about-contents-large {
    margin-bottom: 0;
    padding: 56px 0;
    font-size: 1.6rem;
  }



  /*
  What I can
----------------------------------------------- */
  .background-text_whatican {
    background-image: none;
  }
  .whatican {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 48px;
  }
  .whatican-img {
    width: 90%;
    margin: 0 auto;
  }
  .whatican:nth-child(odd) .whatican-img {
    width: 90%;
    margin: 0 auto;
  }
  .panel {
    width: 90%;
    margin: 0 auto;
    position: static;
    box-shadow: none;
    transform: none;
  }
  .whatican:nth-child(odd) .panel {
    width: 90%;
    margin: 0 auto;
    left: 0;
    position: static;
    box-shadow: none;
    transform: none;
  }

/*
  News
----------------------------------------------- */

  .background-text_news {
    background-image: none;
  }
  .news_intro {
    text-align: unset;
    margin: 0 12% 3%;
  }
  .news_contents_item {
    width: 44%;
    margin-bottom: 24px;
  }
  .news_contents {
    margin: 0 auto;
  }
/*
  Profile
----------------------------------------------- */
  .background-text_profile {
    background-image: none;
  }
  .profile {
    display: block;
  }
  .profile_img_container {
    margin: 0 10%;
  }
  .small-round {
    display: none;
  }
  .profile-panel {
    text-align: center;
    margin: 56px 30px;
  }
  .profile_detail {
    text-align: left;
  }
  .profile_name {
    font-weight: 700;
  }


  .background-text_experience {
    background-image: none;
  }

/*
  Contact
----------------------------------------------- */
  .button3 {
    font-size: 2rem;
    display: block;
    margin: 0 auto;
    padding: 30px 10px;
    border-radius: 0;
    width: 88%;
    color: #fff;
    text-align: center;
    background-size: 180% auto;
    transition: all .3s ease-out;
    margin-bottom: 56px;
  }


  /*
  Footer
----------------------------------------------- */
  .footer_menu {
    display: block;
    text-align: center;
    width: 100%;
  }
  .footer_row {
    width: 100%;
    margin: 16px 0;
  }
  .footer_row > a > p {
    padding: 6px 0;
  }
  .footer_contact_img {
    margin: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 988px) {
/*
  Hero image
----------------------------------------------- */
  .hero-main {
    padding: 13% 0 0;
    width: 89%;
    flex-direction: row;
  }
  _::-webkit-full-page-media, _:future, :root .hero-main {
    padding:  0;
    width: 89%;
    flex-direction: row;
  }
  _::-webkit-full-page-media, _:future, :root .hero-img {
    margin-left: 30px;
  }
  .hero-message {
    font-size: 3.2rem;
    padding-left: 18%;
  }
  _::-webkit-full-page-media, _:future, :root .hero-message {
    font-size: 3.2rem;
    padding: 160px 50px;
    left: 0;
  }
  .hero-blog {
    position: static;
    bottom: 10%;
    width: 180px;
    margin: 32px auto;
  }

  .history_01 h4 {
    right: 21%;
  }
    .history_container_odd .history_line {
    display: none;
  }
  .history_container_even .history_line {
    display: none;
  }
  .history_img {
      max-width: 380px;
  }
  .flow li + li::before {
    content: none;
  }

}


@media screen and (max-width: 767px) {
  .section {
    padding: 80px 0;
  }
  /*
  Hero image
----------------------------------------------- */
  .hero-main {
    display: block;
    padding: 23% 0 0;
  }
  .hero-img {
    max-width: 100%;
    padding: 5% 0;
    object-fit: contain;
  }
  .hero-message {
    writing-mode: horizontal-tb;;
    font-size: 2.8rem;
    position: static;
    padding: 0 5%;
  }
  _::-webkit-full-page-media, _:future, :root .hero-message {
    writing-mode: horizontal-tb;;
    font-size: 2.8rem;
    position: static;
    padding: 0 5%;
  }
  .hero-blog {
    position: absolute;
    bottom: 10%;
    left: 70%;
    width: 80px;
    height: 80px;
    z-index: 1;
  }
  .hero-right {
    padding-top: 0;
  }
  .hero-intro {
    margin: 24px;
  }
  .hero-message01 {
    margin-left: 0;
  }
  .hero-message02 {
    margin-left: 0;
  }
  .hero-message03 {
    margin-left: 0;
  }
  .hero-blog {
    position: static;
    bottom: 10%;
    width: 180px;
    margin: 16px auto;
    }

  /* ===============================================
Profile
=============================================== */
/*
  Profile top
----------------------------------------------- */

  .subtitle {
    font-size: 2rem;
    margin-bottom: 24px;
  }
  .container-secondary {
    padding: 0;
  }

  .profile_hero {
    background-image: url(../images/profile/intro-round_sp.png);
    background-size: contain;
    height: 505px;
    top: 0;
  }
  .profile_hero_container {
    top: 120px;
    margin-bottom: 160px;
}
  .profile_hero_text_title {
    margin-bottom: 32px;
  }
  .profile_hero_text {
    top: 20%;
    max-width: 357px;
    margin: 0 auto;
  }
  .profile_hero_text_main {
    font-size: 1.4rem;
    width: 74%;
    margin: 0 auto;
    line-height: 1.5;
  }

/*
  Profile detail
----------------------------------------------- */
  .profile_detail_img {
      max-width: 100%;
      margin: 0 auto;
  }
  .profile_detail_text {
      margin: 0px 5%;
  }

/*
  History
----------------------------------------------- */
  .background-text_history {
    background-image: none;
  }
  .history_main {
    flex-direction: column-reverse;
  }
  .history_main_even {
    flex-direction: column-reverse;
  }
  .history_img {
    max-width: 100%;
  }
  .history_img_container {
    padding: 0 8%;
  }
  .history_01 {
    padding-top: 0;
    margin-top: 0;
    min-height: 267px;
  }
  .history_circle {
    left: 40%;
    max-width: 170px;
    height: 200px;
  }
  .history_01 h4 {
    top: 32%;
    left: 44%;
    right: 0;
    font-size: 1.8rem;
    margin-bottom: 0;
  }
  .history_badge_even {
    top: -5%;
    left: 3%;
  }
  .history_badge_odd {
    top: -5%;
    left: 57%;
    }
  .history_text {
    padding: 5%;
  }
  .history_container_even .history_line {
    display: none;
  }
  .history_container_odd .history_line {
    display: none;
  }
  .history_07 {
    margin-bottom: 0;
  }
  .history_text_extra_container {
    display: flex;
    flex-direction: row;
    width: 90%;
    margin: 0 auto;
  }
  .history_text_extra {
    padding: 5%;
  }
  .history_text_extra_title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-right: 16px;
  }
  .history_text_extra_title::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FF9900;
  }


/*
  Experience
----------------------------------------------- */
  .background-text_experience {
    background-image: none;
  }
  .experience_container {
    flex-direction: column;
  }
  .experience_contents {
    width: 100%;
  }
  .experience_contents_details {
    padding: 0 7% 10%;
  }

  .button3 {
    font-size: 1.6rem;
  }
  /* ===============================================
Lecture
=============================================== */
  .box1 {
    padding-top: 17vh;
    width: 100%;
  }
  .layer {
    width: 100%;
    padding-top: 35%;
    margin: 0 0 48px;
  }
  .picture {
    top: -30vw;
    width: 80%;
    right: 0;
    margin: 0 10%;
    background-image: url(../images/whatican/whatican-lecture-sp.jpg);
  }
  .picture:before {
    width: 100%;
    padding-top: 150%;
    pointer-events: none;
  }

  .intro_text_container {
    margin: 0 10%;
  }
  .intro_text {
    text-align: left;
  }
  .intro_text_title {
    font-size: 1.8rem;
  }
  .container-white {
    padding: 8%;
    margin: 0 8% 0;
    max-width: 90%;
  }
  .dd {
    position: relative;
    padding-left: 24px;
    margin: 8px 0 16px;
  }
  .theme-dd {
    margin: 0 0 16px;
  }
  .flow {
    flex-direction: column;
  }
  .flow li + li::before {
    top: -16%;
    left: 45%;
    width: 33px;
    height: 28px;
    content: "";
    display: block;
    position: absolute;
    background: url(../images/whatican/whatican-contact-arrow-sp.png) no-repeat;
    background-size: contain;
  }
  .flow li {
      margin-bottom: 36px;
  }
  .contact-form > dl > dt {
    display: block;
    border-bottom: none;
    padding: 16px 0 6px 8px;
  }
  .contact-form > dl > dd {
    display: block;
    padding: 0 10px 12px;
  }
  .contact-form > dl > dd > p {
    padding-left: 2px;
  }
  .must {
    float: unset;
  }
  .contact_confirm {
    padding: 6%;
  }
  .privacy_container {
    width: 90%;
    margin: 0 auto 16px;
  }

/* ===============================================
Class
=============================================== */
  .picture2 {
    top: -30vw;
    width: 80%;
    right: 0;
    margin: 0 10%;
    background-image: url(../images/whatican/whatican-class-sp.jpg);
  }
  .picture2:before {
    width: 100%;
    padding-top: 150%;
    pointer-events: none;
  }

/* ===============================================
Emcee
=============================================== */
  .picture3 {
    top: -30vw;
    width: 80%;
    right: 0;
    margin: 0 10%;
    background-image: url(../images/whatican/whatican-emcee-sp.jpg);
  }
  .picture3:before {
    width: 100%;
    padding-top: 150%;
    pointer-events: none;
  }
/* ===============================================
Column
=============================================== */
  .picture4 {
    top: -30vw;
    width: 80%;
    right: 0;
    margin: 0 10%;
    background-image: url(../images/column/column-sp.jpg);
  }
  .picture4:before {
    width: 100%;
    padding-top: 150%;
    pointer-events: none;
  }

  .tag {
    flex-wrap: wrap;
  }
  .tag_list {
    margin: 0;
    width: 34%;
  }
  .column_contents_item {
  margin-bottom: 24px;
  }
  .column_text_container {
    padding: 5%;
  }
  .column_contents_item h4  {
    font-size: 1.6rem;
  }
  .column_text_list {
    font-size: 1.4rem;
  }
  .column_tag {
    font-size: 1.4rem;
  }

/* ===============================================
Column 01
=============================================== */
  .column_container {
    width: 100%;
  }
  .tag_container {
    width: 90%;
    margin: 0 auto 16px;
  }
  .pagenation {
    width: 90%;
    margin: 0 auto 80px;
  }
  .scroll_text {
        font-size: 1.3rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
  }

/* ===============================================
Old story
=============================================== */
.section-column {
  padding: 1px 0;
}

/* ===============================================
Contact
=============================================== */
  .picture5 {
    top: -30vw;
    width: 80%;
    right: 0;
    margin: 0 10%;
    background-image: url(../images/whatican/whatican-contact-sp.jpg);
  }
  .picture5:before {
    width: 100%;
    padding-top: 150%;
    pointer-events: none;
  }
  .column_contents {
    margin: 0 auto;
  }

/* ===============================================
Thanks
=============================================== */
  .thanks_confirm {
    width: 90%;
    padding: 16px 20px;
    margin-bottom: 40px;
  }

}

  /* iOSでのデフォルトスタイルをリセット */
  input[type="submit"],
  input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    }
  input[type="submit"]::-webkit-search-decoration,
  input[type="button"]::-webkit-search-decoration {
    display: none;
    }
  input[type="submit"]::focus,
  input[type="button"]::focus {
    outline-offset: -2px;
  }