@charset "UTF-8";
@font-face {
  font-display: swap;
	font-family: "Lato-Italic";
	src: url("/fonts/Lato-Italic.ttf") format("truetype");
}

/* ==========================================================================
   common css
   ========================================================================== */
body.simpleheader main {
    /*キャンペーンバナーなし*/
		padding-top: 105px;
		
		/*キャンペーンバナーあり
		padding-top: 145px;
    */
}

main .imgRep {
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}
main .br { display: block; }
main .split { display: inline-block; }

a { color: inherit; }
/* ==========================================================================
   common css
   ========================================================================== */
#movie {
    background: #0e0e0e;
    color: #fff;
}
main article#movie h3 {
	display: inline-block;
	margin-bottom: 0;
	font-size: 15px;
}

#special {
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 30px;
}


/*カードCSS↓*/
*{
  box-sizing: border-box;
}

body {
  background: #fafafa;
}
main {
  font-family: 'Open Sans';
}

/*記事内のh3の手前にアイコンを付ける*/
 div.l-card h3:before {
    font-family:"FontAwesome";
    content:"\f144";
    color:#038de1;
    font-size:20px;
}
 .title_top {
	padding-left: 12px;
	text-align: left;
	font-weight: bold;
    color:#fff;
    font-size: 20px;
}

.l-card {
  overflow: hidden;
  /* width: 285px; */
  width:80%;
  padding: 0;
  /* margin: 24px; */
  /* margin-right: 24px; */
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.1);
}
.l-card:hover .thumbnail-wrapper:after {
  opacity: 0.8;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}
.l-card:hover .thumbnail-wrapper img {
  opacity: 0.6;
  transform: scale(1.1);
}
.l-card:hover .more-text {
  opacity: 1;
  letter-spacing: 4px;
}

.l-thumbnail {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  background: #0cf5c6;
  background: -webkit-linear-gradient(-45deg, #36D1DC 0%, #5B86E5 100%);
  background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);
}
.l-thumbnail .more-text {
  transition: 0.8s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: -1px;
  text-align: center;
}

.thumbnail-wrapper {
  margin: 0;
  padding: 0;
}
.thumbnail-wrapper:after {
  transition: 0.8s;
  content: "";
  box-sizing: border-box;
  display: block;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border: 1px solid #fff;
  opacity: 0;
}
.thumbnail-wrapper img {
  transition: 0.5s;
  display: block;
  max-width: 100%;
  opacity: 1;
  transform: scale(1);
}

main article#mv section:first-child {
    padding: 65px 0 130px 0;
    height: 215px;
}

/*TOPの動画のやつ↓*/

.l-card_cm {
  width: 1000px;
  margin: 0 auto;
}

.l-card_top {
  overflow: hidden;
  width: auto;
  padding: 0;
  margin: 12px;
  border: 1px solid #ddd;
	
}
.l-card_top:hover .thumbnail-wrapper_top:after {
  opacity: 0.8;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}
.l-card_top:hover .thumbnail-wrapper_top img {
  opacity: 0.6;
  transform: scale(1.1);
}
.l-card_top:hover .more-text_top {
  opacity: 1;
  letter-spacing: 4px;
}

.l-thumbnail_top {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  background: #0cf5c6;
  background: -webkit-linear-gradient(-45deg, #36D1DC 0%, #5B86E5 100%);
  background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);
}
.l-thumbnail_top .more-text_top {
  transition: 0.8s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  display: block;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: -1px;
  text-align: center;
}

.thumbnail-wrapper_top {
  margin: 0;
  padding: 0;
}
.thumbnail-wrapper_top:after {
  transition: 0.8s;
  content: "";
  box-sizing: border-box;
  display: block;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border: 1px solid #fff;
  opacity: 0;
}
.thumbnail-wrapper_top img {
  transition: 0.5s;
  display: block;
  max-width: 100%;
  opacity: 1;
  transform: scale(1);
}

.text-content_top {
  padding: 0px;
}
.text-content_top .title_top {
  margin: 0 0 12px 0;
  font-size: 15px;
  padding-left: 12px;
  text-align: left;
  font-weight: bold;
  color:#fff;
}

.kakoi{
  width: 49%;
  display: inline-block;

}


/*TOPの動画のやつ↑*/


.text-content {
  padding: 16px;
}
.text-content .title {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #038de1;
}
.text-content .caption {
  margin: 0 0 12px 0;
  font-size: 11px;
  font-weight: bold;
  color: #000000;
}

.content-meta {
  overflow: hidden;
  width: 100%;
  font-size: 12px;
}
.content-meta .date {
  float: left;
  color: #aaa;
}
.content-meta .like {
  display: inline-block;
  float: right;
  color: #038de1;
}
.content-meta .like .material-icons {
  vertical-align: middle;
  font-size: 16px;
}
VIEW SC

/*カードCSS↑*/

main h2 {
  position: relative;
  height: 0;
  margin-bottom: 0;
  padding-bottom: 8%;
  background-size: 100%;
}
main h2+ p {
  position: relative;
  top: -20px;
  margin-bottom: 20px;
  text-align: center;
}
main h2 img.subtitle {
	display: block;
	margin: 12px auto 0;
}
 main h2 span {
    height: 14px;
    display: block;
    background-position: center top;
    text-align: center;
    font-size: 13px;
    margin-top: 12px;
    height: 17px;
}
main h2.h2_1{
  padding-top: 50px;
  height: 118px;
  margin-bottom: 30px;
  padding-bottom: 0px;

}

main h2.h2_1m0{
  padding-top: 50px;
  height: auto;
  margin-bottom: 20px;
  padding-bottom: 0px;

}


main .listContainer {
  display: flex;
  /* justify-content:space-between ; */
  letter-spacing: 0;
  text-align: left;
  font-size: 0;
  width: 1000px;
  margin: 0 auto;
}
main .listContainer> :not(:nth-child(3n)) {
   margin: 2%; 
  }

/*main .listContainer:last-of-type::after {
  content: '';
  display: block;
  width: 285px;
  height: auto;
  margin: 24px;
}
*/
main dl {
  padding-bottom: 12px;
  text-align: center;
  background: #fff;
}

main dt { margin-bottom: 12px; }
main dd,
main h3 { text-align: left; }
main dd {
  padding: 0 10px;
  letter-spacing: 0.1em;
  font-size: 14px;
}
main dd h3 {
  margin-bottom: 0;
  font-size: 19px;
  color: #0059B2;
}
main dd:nth-of-type(1) {
  margin-bottom: 2px;
  font-size: 15px;
  color: #0059B2;
}
main dd:nth-of-type(2) { margin-bottom: 4px; }
main dd.btn.small.arrow-r,
main dl a.btn.small.arrow-r {
  width: 88%;
  margin: 12px auto 0;
	display: block;
}
main dd p { margin-bottom: 0; }



/*キャンペーン系*/

#sp_corner {
	padding-top: 60px;
	padding-bottom: 0px;
    display: flex;
    justify-content: space-between;
    letter-spacing: 0;
    text-align: left;
    font-size: 0;
    width: 1000px;
    margin: 0 auto;
}

#sp_corner .cam_cap {
  width: 40%;
  position: relative;

 }

.cam_cap .cam_cap01 {
  width: 100%;
  position: relative;
  font-size: 15px;
  font-weight:bold;
  margin-right: 24px;
  overflow: auto;
 }

.cam_cap .cam_cap01 p {
  margin-right: 24px;
  margin-left: 24px;
  text-align: center;
 }

main h2.h2_2{
  padding-top: 44px;
}
#sp_corner .cam_cap h2 {
  margin-bottom: 24px;
  padding-top: 52px;
}

main > article{
	padding-top: 60px;
}


/*キャンペーン系*/

main #mainVisual .contentWrap h2 span.bracketL {
  margin-left: -12px;
  margin-left: -32px;
  margin-left: -50px;
}
main #mainVisual .contentWrap h2 span.bracketR {
  margin-right: -28px;
  margin-right: -48px;
}
main #mainVisual .contentWrap p:nth-of-type(2) {
  text-align: left;
}

main #mainVisual .contentWrap h2,
main #mainVisual .contentWrap h2 span {
  font-size: 42px;
}
main #mainVisual .contentWrap h2 {
  margin-bottom: 20px;
}
main #mainVisual .contentWrap h2 span {
  display: inline-block;
  height: auto;
  margin-top: 0;
  text-indent: 0;
}
main #mainVisual .contentWrap h2 span.bracketL {
  margin-left: -12px;
  margin-left: -32px;
  margin-left: -50px;
}
main #mainVisual .contentWrap h2 span.bracketR {
  margin-right: -28px;
  margin-right: -48px;
}

main #mainVisual {
  padding-top: 0px;
}

.mincho {
  font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ" , "Meiryo", serif;
  font-weight: bold;
}

.youtube {
  position: relative;
  width: 48%;
  padding-top: 27%;
  margin: 20px auto;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.fbox{
  display: flex;
  margin: 0 auto;
}

.margin10{
	margin: 10px;
}

.movie_contents{
	width: 1020px;
	margin: 0 auto;
}


@media screen and (max-width: 767px) {
  #special { padding: 30px 12px 0; }
  main article#mv section:first-child {
		height: auto;
	}
  main h2 { margin-bottom: 6px; }
  main h2+ p {
    position: static;
	  margin-bottom: 28px;
  }
  main #mainVisual .contentWrap h2 {
    margin-bottom: 28px;
  }
	main article#movie h3 {
		font-size: 13px;
	}
  main .listContainer { padding: 0; }
  main .listWrap,
  main .listLink {
    width: 49%;
    margin-bottom: 16px;
    padding: 6px;
  }
  main .listContainer img { width: 100%; }
  main .listContainer> :not(:nth-child(3n)) { margin-right: 0; }
  main .listContainer> :nth-child(odd) { margin-right: 2%; }
  main .listContainer {
  	padding: 0;
  	display: block;
  	width: 100%;
	}
  main dd:nth-of-type(1) { font-size: 14px; }
  main dd h3 { font-size: 16px; }
  main dd:nth-of-type(n+3) { font-size: 13px; }


  main h2.h2_1 {
  padding-top: 40px;
  margin-bottom: 20px;
}


  article .movie {
  position: relative;
  width: 100%;
  padding-top: 75%;

}

#movie {
  padding-top: 35px;
  padding-left: 12px;
  padding-right: 12px;

}


　#movie iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

iframe {
  width: 100%;
  height: 100%;
}

  div.listContainer{
	max-width: 100%;
    height: auto;
	display: block;
    padding-left: 24px;
    padding-right: 24px;
	}

  .l-card {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}


  .l-card {width: 100%;}
	
main article#mv section:first-child {
    padding: 52px 0 5px 0;
}


/*キャンペーン系*/
  #sp_corner {
  width: 100%;
  display: block;
  padding-top: 0px;
  }


  main h2.h2_2 {
  width: 100%;
  text-align: center;
  padding-top: 40px;
}

 .cam_cap{
  max-width: 100%;
  text-align: center;

}

#sp_corner .cam_cap {
  width: 100%;
  position: relative;

 }

 #sp_corner img{
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}


.cam_cap .cam_cap01 {
  font-size: 13px;
}

 .cam_cap .cam_cap01 p{
   margin-left: 12px;
   margin-right: 12px;
   margin-bottom: 40px;

}
	
.text-content .title {
  font-size: 15px;
}
.text-content .caption {
  font-size: 12px;
}

/*キャンペーン系*/
	
.l-card_cm {
  width: 100%;
  margin: 0 auto;
  display: block;
}
	
.text-content_top .title_top {
  font-size: 13px;

}

.kakoi{
    width: 100%;
}	
	
#sp_corner .cam_cap h2 {
  margin-bottom: 0;
  padding-top: 52px;
}
	
main #mainVisual .contentWrap h2,
main #mainVisual .contentWrap h2 span {
  font-size: 20px;
}
main #mainVisual {
    padding-top: 0px;
}

.movie_contents {
    width: 100%;
    margin: 0 auto;
}
	
.fbox {
    display: block;
    margin: 4%;
}
	
.youtube {
  width: 100%;
    padding-top: 56%;
	margin: 10px 0 0 0;
}
}
@media screen and (max-width: 583px) {
  #special { padding: 30px 8px 0; }
  main h2+ p {
  top: auto;
  bottom: -100%;
  left: 0;
  }
  main .listWrap,
  main .listLink {
    width: 100%;
    margin-bottom: 8px;
  }
  main dt { margin-bottom: 8px; }
}


@media screen and (max-width: 479px) {
  main h2 {
    background-position: left 2.5% center;
    background-size: 150%;
  }
}

/* img to text */
.com-subtitle.is-en{
  display: block;
  font-family: Lato-Italic;
}
.com-section-head .is-en {
  color: #038de1;
  font-size: 18px;
  letter-spacing: 0.25em;
  margin: 8px auto 0;
}