@charset "UTF-8";

#sol h2 {
  font-size: 4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

#sol p {
  line-height: 1.8;
}

#sol .inner {
  width: 1150px;
}

.form_btn a {
  color: #fff;
  font-size: 3.2rem;
  display: inline-block;
  background-color: #e73356;
  padding: 20px 100px;
  position: relative;
}

.form_btn a:before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: #fff solid 2px;
  border-right: #fff solid 2px;
  transform: rotate(135deg);
  position: absolute;
  right: 2.4rem;
  top: 40%;
}

@media screen and (max-width: 767px) {
  .form_btn a {
    text-align: center;
    padding: 16px;
    display: block;
  }

  .form_btn a:before {
    top: 36%;
  }
}

/* main_img */

#main_img .form_btn {
  padding-top: 10px;
}

@media screen and (min-width: 767px) {
  .item-list {
    display: flex;
    justify-content: left;
  }
  #main_img .form_btn {
    padding-right: 30px;
  }

  #main_img .form_btn a {
    padding: 20px;
    width: 370px;
    text-align: center;
  }
}

#main_img {
  background: #050a30 url(../img/main_img_pc.jpg) no-repeat right;
  margin: 0;
  animation: fadeIn 1.5s ease 0s 1 normal;
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
  height: 700px;
}
/* じわっと画像が表示される */
@keyframes fadeIn {
  /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
  0% {
    opacity: 0;
  }
  /* 始め */
  100% {
    opacity: 1;
  }
  /* 終わり */
}

/*古いブラウザ用*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#main_img .inner {
  background: -moz-linear-gradient(left,
      rgba(5, 10, 48, 1),
      rgba(5, 10, 48, 0));
  background: -webkit-linear-gradient(left,
      rgba(5, 10, 48, 1),
      rgba(5, 10, 48, 0));
  background: linear-gradient(to right, rgba(5, 10, 48, 1), rgba(5, 10, 48, 0));
  padding: 160px 0;
}

#main_img * {
  color: #fff;
}

/*#main_img p {}

#main_img h1 {
	font-size: 5.0rem;
	margin: 30px 0 50px 0;
}*/
#main_img p {
  font-size: 2rem;
}

#main_img h1 {
  /*font-size: 6.0rem;*/
  font-size: 4rem;
  margin: 30px 0 50px 0;
  line-height: 4.6rem;
}

#main_img h1 span.b-font {
  font-size: 6.8rem;
}

@media screen and (max-width: 767px) {
  #main_img {
    background: url(../img/main_img.jpg) no-repeat right;
    background-size: cover;
    padding: 60px 0;
    margin: 0;
    height: 550px;
  }

  #main_img .inner {
    background: none;
    padding: 0 16px;
  }

  /*#main_img p {
		font-size: 2.0rem;
	}

	#main_img h1 {
		font-size: 4.0rem;
		margin: 30px 0 50px 0;
	}*/
  #main_img p {
    font-size: 2.1rem;
    text-align: center;
  }

  #main_img h1 {
    /*font-size: 5.0rem;*/
    font-size: 3rem;
    margin: 30px 0 50px 0;
    text-align: center;
  }
}

/* intro */

#intro {
  background-color: #fff;
  text-align: center;
  background-image: url(../img/geometry01.svg);
  background-repeat: no-repeat;
  background-position: -5% -10%;
  background-size: 20%;
  margin: 0 0 100px 0;
  padding-top: 100px;
}

#intro h2+p {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 50px;
}

#intro img {
  /*box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
	width: 90%;*/
}

.intro_p_b {
  font-size: 2rem;
  margin-top: 50px;
}

.intro_p_b b {
  font-size: 3rem;
  font-weight: 600;
}

div.ma_smpl {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
iframe.ma_smpl_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  #intro h2+p {
    text-align: left;
  }

  #intro {
    background-size: 40%;
  }
  div.ma_smpl {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }
}

/* problem */

/*#problem {
	background-color: #FFF;
	background-image:url(../img/geometry02.svg);
	background-repeat: no-repeat;
	background-position:105% 110%;
	background-size: 20%;
	text-align: center;
	margin: 0;
	padding-top:75px;
	padding-bottom:100px;
}*/
#problem {
  background: #f1f8ff;
  padding: 70px 0 30px 0;
  margin: 0;
  position: relative;
  /*padding-top: 100px;*/
  margin-top: -10px;
}

#problem .ribbon_body {
  display: block;
  position: relative;
  margin: 15px auto 60px;
  padding: 10px 0;
  /*background: #eff4ff;*/
  background: #fff;
  max-width: 80rem;
}

#problem .ribbon_body h2 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  margin: 0 0 0 -40px;
  width: 100%;
  color: white;
  background: #3f6fed;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
#problem .ribbon_body h2:before {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #1a3066;
}
#problem .ribbon_body ul {
  display: inline-block;
  padding: 26px;
}
#problem .ribbon_body ul li {
  text-align: left;
  margin-bottom: 20px;
  font-size: 2rem;
  padding-left: 40px;
  position: relative;
}
#problem .ribbon_body ul li:before {
  content: "";
  width: 30px;
  height: 30px;
  background: url(../img/icon_balloon.svg) no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
}
#problem .ribbon_body ul li:last-child {
  margin-bottom: 0;
}

#problem h2 {
  margin-bottom: 20px;
  color: #00468a;
}

#problem #problem_box {
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  justify-content: center;
}
#problem #problem_box dl {
  width: 30%;
  margin-bottom: 50px;
  background: #fff;
}
#problem #problem_box dl dd {
  padding: 20px;
  background: #fff;
}
#problem #problem_box dl dt {
  font-size: 2rem;
  background: #00468a;
  padding: 20px;
  text-align: center;
  color: #fff;
}
#problem #problem_box dl dd p:first-child {
  width: 35%;
  margin: 0 auto 10px auto;
  text-align: center;
}
#problem #problem_box dl dd p:last-child {
  text-align: left;
}
#problem #problem_box img {
  height: 100px;
  width: auto;
}
@media screen and (max-width: 767px) {
  #problem h2 {
    font-size: 3.3rem;
  }
  #problem #problem_box {
    display: block;
  }
  #problem #problem_box dl {
    width: 100%;
    margin-right: 0;
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 767px) {
  #problem {
    background-size: 40%;
    padding-top: 10px;
  }
}

/* feature */

#feature {
  /*background: url(../img/bk_gray.jpg) no-repeat;
	background-size: cover;*/
  background: #f1f8ff;
  padding: 50px 0 10px 0;
}
#feature h2 {
  color: #00468a;
}

#feature .feature_box {
  margin-bottom: 100px;
}

#feature .feature_box table th {
  padding-bottom: 10px;
}

#feature .feature_box #point_list .point_box {
  width: 90%;
  position: relative;
  background-color: #fff;
  padding: 20px;
  margin: 0 auto;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
  margin-bottom: 100px;
  text-align: left;
}

#feature .feature_box #point_list .point_box .img {
  width: 30%;
  padding-right: 10px;
  margin-top: auto;
  text-align: center;
}

#feature .feature_box #point_list .point_box .img img {
  width: 200px;
}

#feature .feature_box #point_list .point_box .point_title {
  font-size: 2rem;
  font-weight: 700;
  color: #3f6fed;
  margin-bottom: 20px;
  line-height: 1.8;
}

#feature .feature_box #point_list .point_box .point_title span {
  display: inline-block;
  background-color: #3f6fed;
  padding: 4px 10px;
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 10px;
  margin-right: 1rem;
}

#feature .form_btn {
  text-align: center;
  margin-top: 40px;
}

/*@media screen and (max-width: 767px) {

	#feature .feature_box #point_list .point_box {
		position: static;
		width: 100%;
		padding: 20px;
		margin-left: 0;
	}

	#feature .feature_box #point_list .point_box .img {
		position: static;
		text-align: center;
		top: auto;
		left: auto;
	}

}*/
@media screen and (max-width: 767px) {
  #feature .feature_box #point_list .point_box {
    position: static;
    width: 100%;
    padding: 20px;
    margin-left: 0;
  }

  #feature .feature_box #point_list .point_box .img {
    position: static;
    text-align: center;
    top: auto;
    left: auto;
  }
  #feature .feature_box #point_list .point_box {
    margin-bottom: 35px;
  }
}

/* faq */
#faq {
  padding: 50px 0;
}
.faq_block>dl {
  border: 2px solid #ccc;
  box-sizing: border-box;
  padding: 30px 40px;
}
.faq_block>dl>dt {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 10px;
}
.faq_block>dl>dt>p,
.faq_block>dl>dd>p {
  font-size: 4rem;
  font-weight: bold;
  width: 6%;
}
.faq_block>dl>dt>p {
  color: #e73356;
}
.faq_block>dl>dd {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 5px;
  margin-bottom: 45px;
}
.faq_block>dl>dd:last-of-type {
  margin-bottom: 0;
  border-bottom: none;
}
.faq_block>dl>dd>p {
  color: #3f6fed;
}
.faq_block>dl>dt>span,
.faq_block>dl>dd>span {
  width: 94%;
}
.faq_block>dl>dt>span {
  font-weight: bold;
}
.faq_block>dl>dd b {
  display: block;
  font-weight: bold;
  padding-bottom: 10px;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .faq_block>dl {
    border: 2px solid #ccc;
    box-sizing: border-box;
    padding: 20px 20px;
  }
  .faq_block>dl>dt>p,
  .faq_block>dl>dd>p {
    font-size: 5.5vw;
    font-weight: bold;
    width: 10%;
  }
  .faq_block>dl>dt>span,
  .faq_block>dl>dd>span {
    width: 90%;
    font-size: 3.2vw;
  }
  .faq_block>dl>dd b {
    display: block;
    font-weight: bold;
    padding-bottom: 10px;
    font-size: 3.3vw;
  }
  .faq_block>dl>dd {
    margin-bottom: 25px;
  }
}

/*service */

#service {
  overflow: hidden;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #eff4ff;
}

#service h2+p {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 50px;
}

#service p {
  text-align: center;
  margin-bottom: 100px;
}
#service p b {
  font-weight: 900;
  font-size: 1.3rem;
}

#service h3 {
  color: rgba(0, 0, 0, 0);
  font-size: 72px;
  font-weight: 1000;
  -webkit-text-stroke: 0.5px rgb(227, 236, 255);
  text-shadow: 3px 3px #3f6fed;

  margin-bottom: 30px;
  margin-top: 100px;
}
#service h3.color02 {
  text-shadow: 3px 3px #e73356;
}
#service h3.color03 {
  text-shadow: 3px 3px #050a30;
}

#service h4 {
  /*font-size:larger;*/
  font-size: 1.65rem;
  font-weight: bold;
  margin-bottom: 10px;
}
#service .sports p.sevice_p_tb,
#service .entertainment p.sevice_p_tb,
#service .conference p.sevice_p_tb {
  display: none;
}

@media screen and (max-width: 767px) {
  #service p {
    margin-bottom: 5rem;
  }

  #service h3 {
    font-size: 48px;
    margin-top: 50px;
  }
  #service h4 {
    font-size: 3.6vw;
  }
  #sol .inner {
    width: 1150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #service .sports p.sevice_p_pc,
  #service .entertainment p.sevice_p_pc,
  #service .conference p.sevice_p_pc {
    display: none;
  }
  #service .sports p.sevice_p_tb.img_tb,
  #service .entertainment p.sevice_p_tb.img_tb,
  #service .conference p.sevice_p_tb.img_tb {
    display: block;
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }
  #service .sports p.sevice_p_tb.img_tb img,
  #service .entertainment p.sevice_p_tb.img_tb img,
  #service .conference p.sevice_p_tb.img_tb img {
    vertical-align: top;
  }
  #service .sports p.sevice_p_tb,
  #service .entertainment p.sevice_p_tb,
  #service .conference p.sevice_p_tb {
    display: block;
    margin: auto auto 3rem auto;
  }
  #service .inner .box {
    margin: 0px auto 50px auto;
    padding-top: 3rem;
    width: 90%;
    background-color: rgba(239, 244, 255, 0.85);
  }
}

/*service entertainment*/

#service .entertainment p {
  /*padding:5px 10px;
	text-align: left;
	font-size:smaller;*/
  display: inline-block;
  background-color: rgba(239, 244, 255, 0.5);
  text-align: justify;
  width: 45%;
  font-size: 1.3rem;
}

#service .entertainment {
  position: relative;
  padding-top: 10px;
  padding-bottom: 50px;
  z-index: 0;
}
#service .entertainment::before {
  content: "";
  position: absolute;
  right: -10%;
  top: 0;
  z-index: -1;
  width: 60%;
  height: 100%;

  background: #050a30 url(../img/back_Ew.jpg) no-repeat left;
  background-size: cover;
  background-position: center left;
  background-repeat: no-repeat;
  transform: skewX(-10deg);
  transform-origin: center center;
}
#service .entertainment::after {
  content: "";
  position: absolute;
  right: 50px;
  top: 5%;
  z-index: -1;
  width: 45%;
  height: 95%;
  background: url(../img/live_tab.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}

@media screen and (max-width: 767px) {
  #service {
    padding-bottom: 0px;
  }

  #service .entertainment .inner .box {
    margin: 50px auto;
    padding-top: 3rem;
    width: 90%;
    background-color: rgba(239, 244, 255, 0.85);
  }

  #service .entertainment {
    /*margin-top:15px;*/
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 0px;
  }

  #service .entertainment p {
    padding: 5px 10px;
    text-align: center;
    /*font-size:smaller;*/
    font-size: 1.75rem;
    display: inline-block;
    background-color: rgba(239, 244, 255, 0);
    margin-bottom: 2rem;
    width: 96%;
    font-weight: 600;
  }

  #service .entertainment {
    background: url(../img/back_Ew.jpg) no-repeat;
    background-size: cover;
    background-position: center left;
  }

  #service .entertainment::after {
    display: none;
  }
  #service .entertainment::before {
    display: none;
  }
}

/*service conference*/

#service .conference {
  margin-top: 15px;
  text-align: right;
}

#service .conference p {
  /*padding:5px 10px;
	text-align: right;
	font-size:smaller;*/
  display: inline-block;
  background-color: rgba(239, 244, 255, 0.85);
  text-align: justify;
  width: 45%;
  font-size: 1.3rem;
}

#service .conference {
  position: relative;
  padding-top: 10px;
  padding-bottom: 50px;
  z-index: 0;
}
#service .conference::before {
  content: "";
  position: absolute;
  left: -10%;
  top: 0;
  z-index: -1;
  width: 60%;
  height: 100%;
  background: #050a30 url(../img/back_Cw.jpg) no-repeat right;
  background-size: cover;
  background-position: center right;
  transform: skewX(-10deg);
  transform-origin: center center;
}
#service .conference::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5%;
  z-index: -1;
  width: 45%;
  height: 95%;
  background: url(../img/Cw_tab.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}

@media screen and (max-width: 767px) {
  #service .conference .inner .box {
    margin: 50px auto;
    padding-top: 3rem;
    width: 90%;
    background-color: rgba(239, 244, 255, 0.85);
  }

  #service .conference {
    margin-top: 0px;
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 0px;
  }

  #service .conference p {
    padding: 5px 10px;
    text-align: center;
    /*font-size:smaller;*/
    font-size: 1.75rem;
    display: inline-block;
    background-color: rgba(239, 244, 255, 0);
    margin-bottom: 2rem;
    width: 96%;
  }

  #service .conference {
    background: url(../img/back_Cw.jpg) no-repeat;
    background-size: cover;
    background-position: center right;
  }

  #service .conference::before {
    display: none;
  }
  #service .conference::after {
    display: none;
  }
}

/*service sports*/

#service .sports {
  margin-top: 15px;
  text-align: right;
}

#service .sports p {
  /*padding:5px 10px;
	text-align: right;
	font-size:smaller;*/
  display: inline-block;
  background-color: rgba(239, 244, 255, 0.5);
  text-align: justify;
  width: 45%;
  font-size: 1.3rem;
}

#service .sports {
  position: relative;
  padding-top: 10px;
  padding-bottom: 50px;
  z-index: 0;
}
#service .sports::before {
  content: "";
  position: absolute;
  left: -10%;
  top: 0;
  z-index: -1;
  width: 60%;
  height: 100%;
  background: #050a30 url(../img/back_Sp.jpg) no-repeat right;
  background-size: cover;
  background-position: center right;
  transform: skewX(-10deg);
  transform-origin: center center;
}
#service .sports::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5%;
  z-index: -1;
  width: 45%;
  height: 95%;
  background: url(../img/sp_tab.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}
@media screen and (max-width: 767px) {
  #service .sports .inner .box {
    margin: 50px auto;
    padding-top: 3rem;
    width: 90%;
    background-color: rgba(239, 244, 255, 0.75);
  }

  #service .sports {
    margin-top: 0px;
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 0px;
  }

  #service .sports p {
    padding: 5px 10px;
    text-align: center;
    /*font-size:smaller;*/
    font-size: 1.75rem;
    display: inline-block;
    background-color: rgba(239, 244, 255, 0);
    margin-bottom: 2rem;
    width: 96%;
  }

  #service .sports {
    background: url(../img/back_Sp.jpg) no-repeat;
    background-size: cover;
    background-position: center right;
  }

  #service .sports::after {
    display: none;
  }
  #service .sports::before {
    display: none;
  }
}

/* example */

#example {
  background: url(../img/bk_gray.jpg) no-repeat;
  background-size: cover;
  text-align: center;
  padding-bottom: 100px;
  padding-top: 100px;
  /*margin-top: -100px;*/
}

#example h2+p {
  text-align: center;
  font-size: 2rem;
}

#example h3 {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  display: inline;
  /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
  padding: 10px 0 2px;
}

#example .flexslider {
  background: none;
  z-index: 0;
}
#example ul.slides {
  width: 94%;
  margin: auto;
}
#example .flexBox {
  display: flex;
  align-items: center;
}
#example .flexBox.innerBox {
  gap: 2%;
}

.flexBox.ttlBox2 {
  margin-bottom: 15px;
  align-items: center;
}
.ttlBox>.icon {
  width: 150px;
  height: 4rem;
  background: #e73356;
  color: #fff;
  font-weight: 900;
  font-size: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.ttlBox>.ttl {
  width: 81%;
  font-weight: bold;
}
dl.contBox {
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

#example dt {
  text-align: left;
}

#example dt b {
  font-weight: 900;
}
#ex_flexslider li.slide {
  height: 780px;
  background-color: #fff;
  border-radius: 50px;
  padding: 5%;
}

.ttlBox {
  margin-bottom: 15px;
}

.icon2 {
  margin-top: 0;
  font-weight: 900;
  font-size: 2.1rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 150px;
  height: 4rem;
  margin-right: 15px;
  background: #44546a;
  color: #fff;
}
.ex_txt,
.ex_img {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ex_txt {
  width: 58%;
}
.ex_img {
  width: 40%;
}
p.ex-ex {
  background-color: #44546a;
  color: #ffffff;
  border-radius: 50px;
  margin: 20px 0 50px 0;
  padding: 15px 50px;
  display: inline-block;
  font-weight: 900;
}
p.ex-ex b {
  color: #e73356;
  font-weight: 900;
}
p.ttl {
  font-size: 2.8rem;
}
p.icon2-ttl {
  color: #e73356;
  font-size: 2rem;
  font-weight: 900;
  line-height: 2rem !important;
}
div.video_btn {
  z-index: 1;
}

div.video_btn a {
  color: #fff;
  font-size: 3.2rem;
  display: inline-block;
  background-color: #e73356;
  padding: 20px 100px;
  position: relative;
}

.br_pc {
  display: block;
}

/*戻る、次へ矢印の位置*/
#example .flex-nav-prev,
#example .flex-nav-next {
  display: inline-block !important;
  position: absolute;
  /*絶対配置にする*/
  z-index: 3;
  top: 42%;
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 8px solid #44546a;
  /*矢印の色*/
  border-right: 8px solid #44546a;
  /*矢印の色*/
  height: 30px;
  width: 30px;
}

#example .flex-nav-prev {
  /*戻る矢印の位置と形状*/
  left: 2.5%;
  transform: rotate(-135deg);
}

#example .flex-nav-next {
  /*次へ矢印の位置と形状*/
  right: 2.5%;
  transform: rotate(45deg);
}

#example .flexslider:hover .flex-direction-nav .flex-next,
#example .flexslider:hover .flex-direction-nav .flex-prev {
  display: inline-block !important;
  opacity: 0;
  padding: 15px;
}
#example .flex-direction-nav .flex-next {
  right: 2.5%;
}
#example .flex-direction-nav .flex-prev {
  left: 2.5%;
}
#example .flex-direction-nav a.flex-next:before,
#example .flex-direction-nav a.flex-prev:before {
  content: "";
}
@media screen and (max-width: 767px) {
  #example p {
    text-align: left;
  }
  #example h3 {
    font-size: 4.45vw;
  }
  #example .flexBox.ttlBox,
  #example .flexBox.innerBox {
    flex-direction: column;
    align-items: center;
  }
  .ttlBox>.icon {
    width: 100%;
  }
  .ex_txt,
  .ex_img {
    width: 100%;
  }
  #example div.ex_img p {
    text-align: center;
  }
  .br_pc {
    display: none;
  }
  .icon2 {
    font-size: 1.5rem;
    width: 25vw;
  }
}
@media screen and (max-width: 434px) {
  #ex_flexslider li.slide {
    border-radius: 25px;
  }
  p.icon2-ttl {
    font-size: 2rem;
  }
  .icon2 {
    font-size: 1.5rem;
  }
  p.ex-ex {
    border-radius: 15px;
  }
}
/*
#example {
	background: url(../img/bk_gray.jpg) no-repeat;
	background-size: cover;	background-size: cover;

	text-align: center;
	padding-top: 50px;
	padding-bottom: 100px;
}

#example h2+p {
	text-align: center;
	font-size: 2.0rem;
}

#example p{
	margin-top:50px;
}

#example h3 {

	font-size: 2.5rem;
	font-weight: 600;
	text-align: center;

	background: linear-gradient(transparent 70%, #C5D6FF 0%);
	display: inline;
	padding: 10px 0 2px;

}

#example .beach {
	margin-bottom:100px;

}

#example .beach div img{
	width: 90%;
	margin: 50px auto 50px;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
}

#example .beach .form_btn {
	margin-top:30px;
	text-align: center;
}

#example .beach .form_btn a:before {
	border-top: #FFF solid 2px;
	border-right: #FFF solid 2px;
	transform: rotate(46deg);
	position: absolute;
	right: 2.4rem;
	top: 40%;
}

#example .youtube {
	width: 90%;
	aspect-ratio: 16 / 9;
	margin: 50px auto 50px;
  }
#example .youtube iframe {
	width: 100%;
	height: 100%;
  }

@media screen and (max-width: 767px) {

	#example p {
		text-align: left;
	}
	#example .beach {
		margin-bottom: 20px;
	}

}
*/

/* example JSなし【削除する】 */
.example_itemBox {
  background-color: #fff;
  padding: 40px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  margin-bottom: 60px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
}
/*
.example_itemBox:first-child{
	margin-bottom: 60px;
}*/

/* intro_example */
.intro_example {
  background: url(../img/bk_gray.jpg) no-repeat;
  background-size: cover;
  text-align: center;
  padding: 60px 0 80px;
}
.intro_exampleBox {
  width: 1150px;
  margin: 0 auto 80px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
}
.intro_exampleInner {
  padding: 40px 70px;
}
.intro_exampleItem {}
.intro_exampleTitleBox {
  display: flex;
  margin-bottom: 40px;
}
.intro_exampleTitleBox p {
  font-size: 2.8rem;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
}
.intro_exampleTitleBox p:first-child {
  background-color: #e73356;
  color: #fff;
  padding: 0 20px;
}
.intro_exampleTitleBox p:nth-child(2) {
  width: 80%;
}
.intro_explanation {
  margin: 0 auto 50px;
  width: 96%;
  font-size: 1.8rem;
  background-color: #44546a;
  padding: 15px 0;
  color: #fff;
  font-weight: bold;
  border-radius: 30px;
}
.intro_explanation b {
  font-size: 1.8rem;
  color: #e73356;
  font-weight: bold;
}
.intro_exampleDetail {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}
.intro_exampleDetail_one {
  flex-direction: column;
  align-items: inherit;
}
.intro_exampleDetail__Text {
  width: 64%;
  /*60*/
}
.intro_exampleDetail_one .intro_exampleDetail__Text {
  width: 100%;
}
.intro_exampleDetail__TextItem {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px dotted #44546a;
}
.intro_exampleDetail__TextItem dl {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}
.intro_exampleDetail__TextItem dl dt {
  width: 30%;
  min-width: 16.5rem;
  color: #fff;
  background-color: #44546a;
  font-weight: bold;
  font-size: 2.1rem;
  padding: 5px 30px;
}
.intro_exampleDetail_one .intro_exampleDetail__TextItem dl dt {
  width: 17.5%;
}
.intro_exampleDetail__TextItem dl dd {
  text-align: left;
  color: #e73356;
  font-weight: bold;
  font-size: 2.1rem;
  line-height: 2.6rem !important;
}
.intro_exampleDetail__TextItem p {
  text-align: left;
  line-height: 2.6rem !important;
}
.intro_exampleDetail__TextItem p b {
  font-weight: bold;
}

.intro_exampleDetail__Image {
  width: 40%;
}

.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
  .intro_exampleBox {
    width: 95%;
    border-radius: 15px;
    margin-bottom: 10vw;
  }
  .intro_exampleInner {
    padding: 7vw 4vw;
  }
  .intro_exampleTitleBox {
    display: block;
    margin-bottom: 4vw;
  }
  .intro_exampleTitleBox p:nth-child(2) {
    width: 100%;
    line-height: 4rem !important;
    margin: 5vw auto;
  }
  .intro_explanation {
    width: 100%;
    border-radius: 10px;
    padding: 3vw 5vw;
  }
  .intro_exampleDetail {
    display: block;
  }
  .intro_exampleDetail__Text {
    width: 100%;
  }
  .intro_exampleDetail__TextItem dl {
    display: block;
  }
  .intro_exampleDetail__TextItem dl dt,
  .intro_exampleDetail_one .intro_exampleDetail__TextItem dl dt {
    width: 41%;
    margin-bottom: 3vw;
  }
  .intro_exampleDetail__Image {
    width: 100%;
  }
}

/*event*/
.intro_eventBox {
  width: 1150px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 30px;
}
.event {
  /*width: 94%;*/
  width: 100%;
  background-color: white;
  border-radius: 30px;
  padding: 30px 0;
  margin: 0 auto;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
}
.event h4 {
  font-size: 2.5rem;
  background-color: #e73356;
  color: white;
  font-weight: 600;
  padding: 15px;
  display: inline-block;
}
.event_flex {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}
.event_flex_inner {
  text-align: center;
}
.event_flex_inner.left {
  width: 45%;
}

.event_flex_inner.right p {
  font-size: 2.5rem;
  font-weight: 600;
}
.event_btn_outer {
  padding-top: 30px;
}
.event_btn {
  font-size: 2.5rem;
  font-weight: 900;
  color: #e73356;
  border: #e73356 solid;
  border-radius: 5px;
  padding: 5px 30px;
}
.event_btn_outer p {
  font-size: 1.2rem !important;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .intro_eventBox {
    width: 95%;
  }
  .event_flex {
    flex-direction: column;
  }
  .event_flex_inner.left {
    width: auto;
    max-width: 500px;
  }
  #event h4 {
    font-size: 2rem;
  }
}

/* case */

#case {
  padding: 50px 0;
  text-align: center;
}

#case img {
  width: 90%;
}

@media screen and (max-width: 767px) {
  #case img {
    width: 100%;
  }
}

/* form */

#form {
  background: #f0f0f0;
  padding: 70px 0;
}

#form p {
  margin-bottom: 30px;
  text-align: center;
}

#example h2+p {
  font-size: 2rem;
}

/** animation
-----------------------------------------------------------------------**/
.single-item+.single-item {
  margin-top: 80px;
}
/* アニメーションスタイル */
/* ---------------------------- */

/* アニメーション前 */
.u-fade-type-up {
  transform: translateY(50px);
  opacity: 0;
}
/* トリガー発火でis-activeを付与 */
.u-fade-type-up.is-active {
  transition: 0.6s;
  transform: translateY(0);
  opacity: 1;
}

/* スクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 100px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-100px, 0);
}

.fade-in-right {
  transform: translate(100px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}
/** slider
-------------------------------------------------------**/
.slider_box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}
#carousel ul.slides>li {
  display: none !important;
  float: none !important;
  cursor: pointer;
}
#carousel ul.slides>li.on {
  display: block !important;
}
#carousel {}
#slider {
  width: 75%;
  border: none;
  box-shadow: none;
}
#carousel {
  width: 25%;
}
.flexslider .slides img {
  width: 100% !important;
}
.flexslider:hover .flex-direction-nav .flex-next,
.flexslider:hover .flex-direction-nav .flex-prev {
  display: none !important;
}
#intro .slider_box img {
  width: 100%;
  box-shadow: none;
}
.flexslider {
  border: none !important;
}
.slider_box .icon_tap {
  position: absolute;
  bottom: 245px;
  right: -25px;
  width: 80px;
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .slider_box {
    margin-bottom: -15px !important;
  }
  .slider_box .icon_tap {
    width: 14%;
    bottom: 25px;
    right: 0;
  }
}
@keyframes poyopoyo {
  0%,
  40%,
  60%,
  80% {
    transform: scale(1);
  }
  50%,
  70% {
    transform: scale(0.9);
  }
}
.flex-nav-next,
.flex-nav-prev {
  display: none;
}
/*.lp_slide {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}
.flexslider {
	position: relative;
}
.flexslider .icon_tap {
	position: absolute;
	bottom: -30px;
	right: -10px;
	width: 80px;
	animation: poyopoyo 2s ease-out infinite;
  	opacity: 1;
}
@media screen and (max-width: 767px) {
	.flexslider {
		margin-bottom: 25px !important;
	}
	.flexslider .icon_tap {
		width: 14%;
	}
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.9);
  }
}
.flexslider.lp_slide {
	border: none;
}
.lp_slide.w90 {
	width: 90%;
	margin: 0 auto;
}
#intro .lp_slide img {
	width: 100%;
	box-shadow: none;
}
ul.slides {
	width: 75%;
}
ol.flex-control-thumbs {
	margin: 0;
	width: 25%;
}
ol.flex-control-thumbs li {
	width: 100%;
}
.flex-prev, .flex-next {
	display: none !important;
}
.flex-control-thumbs img {
	opacity: 1 !important;
}*/
.ss {
  display: block;
  width: 1000px;
  margin: 0 auto;
}
.mgt {
  margin-top: 16vw;
}
@media screen and (max-width: 767px) {
  .ss {
    display: block;
    width: 94%;
    margin: 0 auto;
  }
  .mgt {
    margin-top: 16vw;
  }
}