@charset "utf-8";

/*　タイアップサイト用
-------------------------------------------------*/
@media screen and (min-width:768px) {
	body {
	  text-align:center;
	}
}

body {
	text-align:center;
}

#tieup {
  border-bottom:1px solid #ddd;
  text-align:center;
  color:#000;
  font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.8em;
  width:100%;
  overflow-x:hidden;
}



@media all and (-ms-high-contrast:none){
  #tieup { 
	  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   } 
}

@media screen and (min-width:950px) {
	#tieup {
		font-size:16px;
	}
}

#tieup a:link,
#tieup a:visited {
  color:#000;
}

#tieup a:link {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -khtml-opacity: 1;
  -moz-opacity: 1;
  transition:0.5s
}

#tieup a:hover {
  text-decoration:none;
  color:#666;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
  -khtml-opacity: 0.8;
  -moz-opacity: 0.8;
  transition:0.5s;
}

#tieup * {
	box-sizing: border-box;
}

img {
	max-width:100%;
	height: auto;
}

/*　bgcolor
----------------------------------------------------------*/
@media screen and (min-width:950px) {
.bgcolor {
	background: url("bg.svg") left top no-repeat;
	background-size: 41vw;
}
}
/*　枠組み
----------------------------------------------------------*/
.container {
	box-sizing: content-box;
	position: relative;
	width: 100%;
	text-align: left;
	line-height: 2;	
	margin:20px auto 0;
}

.container section{
	padding: 20px 5% 0 5%;
	
}
.container section.moviearea{
	padding-bottom:20px;
	padding-left: 0;
	padding-right: 0;
	margin-left: 20px;
	margin-right: 20px;
}
.container section.btnarea{
	padding-bottom:10px;
}

.container section.sec02{
	background: url("img_03.jpg") left top no-repeat;
	background-size: contain;
}


@media screen and (min-width:950px) {
	.container section {
		max-width: 1366px;
		padding: 0 0 60px 0;
		margin:60px auto 0 auto;
	}
	
	.container section.sec01{
		width:941px;
		margin:0 auto;
	}
	
	.container section.sec03{
		max-width:1073px;
		margin:0 auto;
	}
	
	.container section.moviearea{
		max-width:660px;
		margin:0 auto;
		padding-bottom: 50px;
	}
	
	.container section.btnarea{
		padding-bottom:30px;
	}
}  


/*　アキ調整
----------------------------------------------------------*/
.pt-l {	padding-top: 50px;}
.pt-m {	padding-top: 40px;}
.pt-s {	padding-top: 15px;}
.pb-l {	padding-bottom: 50px;}
.pb-m {	padding-bottom: 30px;}

@media screen and (max-width:949.9px) {
	.c-pb-sp-30  {padding-bottom: 30px;}
}

@media screen and (min-width:950px) {
	.pt-l {	padding-top: 125px;	}
	.pt-m {	padding-top: 80px;}
	.pt-s {	padding-top: 25px;}
	.pb-l {	padding-bottom: 100px;}
	.pb-m {	padding-bottom: 50px;}
}


/*　メインビジュアル
----------------------------------------------------------*/
.lead {
	text-align: left;
	margin:0 auto 30px auto;
	font-weight: 600;
	line-height:1.8em;
}
.lead p{
	width:100%;
	padding:20px 5% 0 5%;
}


.mainv {
	position: relative;
	max-width: 1366px;
	}

	
.mainv-img {
	width: 100vw;
	max-width: 1366px;
	margin:0 auto;
}
	
.mainv-img img {
	width: 100%;
}
	
@media screen and (min-width:950px) {
	.mainv {
		margin: 0 auto;
		position: relative;
	}
	.lead {
		font-size: 16px;
		padding:0;
		margin-top:0;
		position: absolute;
		bottom:0;
		left:10%;	
		width:80%;
		background-color: rgb(255,255,255,0.5);
		backdrop-filter: blur(15px);
	}
	.lead p{
		width:100%;
		padding:20px;
	}
}

@media screen and (min-width:1366px) {
	.mainv {
		margin: 0 auto;
		position: relative;
	}
	.lead {
		font-size: 18px;
		margin-top:0;
		position: absolute;
		top:596px;
		left:143px;	
		width:726px;
		background-color: rgb(255,255,255,0.5);
		backdrop-filter: blur(15px);
	}
	.lead p{
		width:34em;
		margin:20px 0 0 50px;
	}
}

/*見出し
----------------------------------------------------------*/
.ttl-01{
    text-align: center;
    margin:0 auto 30px auto;
	font-size: 22px;
	font-weight: 600;
	line-height:1; 
	color:#fff;
	letter-spacing: 0;
}

.ttl-01 span{
    margin:0 auto 0 auto;
	display: inline-block;
	padding:10px 15px;
	background-color: rgb(39,155,178,0.85);
}

@media screen and (min-width:950px) {
    .ttl-01{
		text-align: left;
        margin-bottom:30px;
		font-size:29px;
    }  
	
	.ttl-01 span{
		margin:0 auto 3px auto;
	}
}

/*　col
----------------------------------------------------------*/
.col-01 {
	padding-top:32%;
	margin:0 auto;
}
@media screen and (min-width:950px) {
	.col-01 {
		width:787px;
	}
	.col-02 {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
	}
	
	.col-02.reverse {
        flex-direction: row-reverse;
	}
	.col-02-txt{
        width:26em; 
	}
	.col-02-txt2{
        width:27em; 
	}
}


/*　本文内画像
----------------------------------------------------------*/
.col-02-img{
    width: 78.8%;
	max-width: 420px;
	margin:0 auto;
	position: relative;
}

.col-02-img img{
    width: 100%;
	margin:0;
}

.col-02-img2{
    width: 100%;
	max-width: 535px;
	margin:0 auto 30px auto;
}

.col-02-img2 img{
    width: 100%;
	margin:0 0 20px 0;
}

.caption {
	text-align: center;
	position: absolute;
	bottom:2%;
	right: 0;
	left: 0;
	margin: 0 auto;
	margin-left: -30px;
	margin-right: -30px;
	width: calc(100% + 60px);
}

@media screen and (max-width:360px) {
	.caption {
		bottom: -2%;
	}
}

.caption p.prof {
	font-size:12px;
	line-height: 1.4;
	font-weight: 600;
	
}
	
.caption h3 {
	font-size:15px;
	text-align: center;
	font-weight: 600;
	line-height: 1.5;
	}
	
.caption h3 span{
	font-size:13px;
	display: inline-block;
	margin-left:5px;
	}

.img-area{
	width: 100%;
	margin:40px auto 0 auto;
}



@media screen and (min-width:950px) {
    .col-02-img{
		width: 420px;
		margin:0;
    } 
	
	.col-02-img img{
		width: 100%;
		margin:0;
	}
    .col-02-img2{
		width:50%;
		max-width: 535px;
		margin:0;
    } 
	
	.col-02-img2 img{
		width: 100%;
		margin:0 0 40px 0;
	}

	.caption {
		text-align: left;
		position: absolute;
		top:480px;
		right: auto;
		left: 30px;
	}

	.caption.right {
		text-align: right;
	}
	
	.caption p.prof {
		font-size:15px;
		margin-bottom:7px;
	}
	
	.caption h3 {
		font-size:24px;
		line-height: 1.2;
		text-align: left;
	}
	
	.caption.right h3 {
		text-align: right;
	}
	
	.caption h3 span{
		font-size:20px;
		display: inline-block;
		margin-left:5px;
	}
	
	.se02-img{
		margin:3em auto 4em;
	}
	
	.img-area{
		margin:4em auto 0 auto;
	}

}


/*　本文内テキスト
----------------------------------------------------------*/
.txt-01{
	margin-bottom:2em;
}

.txt-01-name{
	font-weight: 600;
	display: inline-block;
	margin-right:1em;
}



/*　フッター
----------------------------------------------------------*/
.footer{
	text-align: center;
	background-color:#F6F6F6; 
	padding:10px 0 30px 0;
}

.footer_title{
	font-size:18px;
	font-weight: 600;
	margin-bottom:10px;
}

.footer_txt{
	font-weight: 500;
}
.footer_txt a{
	text-decoration: none;
}
.footer_txt a:hover{
	text-decoration: underline!important;
}

.logo{
    width:200px;
    margin:0 auto 20px auto;
}

.btn-01 {
	text-align: center;
}
.btn-01 a {
	background: #279BB2;
	color: #fff !important;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	width: 100%;
	max-width: 500px;
	font-size: 15px;
	display: block;
    position: relative;
    height:50px;
	line-height: 50px;
	border-radius: 50px;
	margin:0 auto 20px auto;
}

.btn-01 a:after{
  position: absolute;
  right:15px;
  top:16px;
  content: "";
  display: inline-block;
  width: 10px;
  height: 18px;
  background: url("btn_icon.svg") no-repeat;
  background-size: contain;
  vertical-align: middle;
}

@media screen and (min-width:950px) {
	
	.footer{
		padding:10px 0 60px 0;
	}
	
	.footer_title{
		font-size:20px;
		margin-bottom:15px;
	}
	
    .logo{
        width:356px;
        margin:0 auto 40px auto;
	}
	.btn-01 a {
		height:64px;
        line-height: 64px;
		border-radius: 64px;
		font-size: 19px;
        padding:0;
	}
    
    .btn-01 a:after{
        right:20px;
        top:23px;
    }
}