@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:500;
  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:#03030;
  text-decoration:none;
}

#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.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  transition:0.5s;
}

#tieup * {
	box-sizing: border-box;
}

img {
	max-width:100%;
	height: auto;
}

/*　枠組み
----------------------------------------------------------*/
.container {
	box-sizing: content-box;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	text-align: left;
	line-height: 1.8;	
}

.container section{
	padding-left: 25px;
	padding-right: 25px;
	
}

@media screen and (min-width:950px) {
	.container section {
		max-width: 980px;
		padding:0;
		margin:0 auto;
	}
	
    article{
        margin-bottom:60px;
    }
}  


/*　アキ調整
----------------------------------------------------------*/
.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 (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;
	font-weight: bold;
}
@media screen and (min-width:950px) {
	.mainv {
		margin: 0 auto 80px auto;
	}
	.mainv-img {
		position: relative;
	}
	
	.mainv-img img {
		width: 100vw;
	}
	.mainv h2 {
		position: absolute;
		bottom:-22px;
		left: 50%;
		transform: translateX(-50%);
		width:167px;
		height:44px;
		line-height: 44px;
		font-size:22px;
		color:#fff;
		font-weight: 600;
		text-align: center;
		background:linear-gradient(to right, #B30101, #FE0002);
		letter-spacing: 0;
	}
	.mainv-txt {
		width: 100%;
		background-color: #F4F4F4;
		padding:40px 0 50px 0;
	}
	.mainv-txt-inner {
		max-width: 835px;
		margin:0 auto;
	}
	
	.mainv-txt-inner ul {
		text-align: center;
		font-weight: 600;
		display: flex;
		justify-content:center;
		align-items: center;
		margin-bottom:25px;
		gap: 20px;
	}
	.mainv-txt-inner p.prof {
		font-size:15px;
		line-height: 1.2;
		margin-bottom:7px;
	}
	
	.mainv-txt-inner h3 {
		font-size:24px;
		letter-spacing: 0.01em;
	}
	
	.mainv-txt-inner h3 span{
		font-size:18px;
		display: inline-block;
		margin-left:5px;
	}
	.lead {
		font-size: 17px;
		line-height: 1.64;
	}
}
@media screen and (max-width:949.9px) {
	.mainv {
		margin: 0 auto 40px auto;
	}
	.mainv-txt {
		padding-top: 20px;
	}
	
	.mainv-img {
		position: relative;
	}
	
	.mainv-img img {
		width: 100vw;
	}
	.mainv h2 {
		position: absolute;
		bottom:-15px;
		left: 50%;
		transform: translateX(-50%);
		width:122px;
		height:30px;
		line-height: 30px;
		font-size:19px;
		color:#fff;
		font-weight: 600;
		text-align: center;
		background:linear-gradient(to right, #B30101, #FE0002);
	}
	
	.mainv-txt {
		background-color: #F4F4F4;
		padding: 30px 25px 30px 25px;
	}
	.mainv-txt-inner ul {
		text-align: left;
		font-weight: 600;
		max-width: 20rem;
		margin:0 auto 25px auto;
	}
	.mainv-txt-inner ul li {
		display: flex;
		justify-content:space-between;
		align-items: center;
		margin-bottom:10px;
	}
	.mainv-txt-inner ul li.icon {
		display: none;
	}
	
	.mainv-txt-inner p.prof {
		font-size:12px;
		line-height: 1.2;
	}
	
	.mainv-txt-inner h3 {
		font-size:20px;
		letter-spacing: 0.01em;
		text-align: right;
	}
	
	.mainv-txt-inner h3 span{
		font-size:15px;
		display: inline-block;
		margin-left:5px;
	}
	
	.lead {
		font-size: 15px;
	}
	.lead br {
		display: none;
	}
}

/*見出し
----------------------------------------------------------*/
.ttl-01{
    text-align: center;
    margin:20px auto 20px auto;
	font-size: 21px;
	font-weight: 600;
	line-height:1.3; 
}

@media screen and (min-width:950px) {
    .ttl-01{
        margin:30px auto 30px auto;
		font-size:32px;
    }  
}

/*　本文内画像
----------------------------------------------------------*/
.col-02-img{
    width: 80%;
	max-width: 400px;
	margin:0 auto;
}

.col-02-img img{
    width: 100%;
}

.caption {
	text-align: left;
	font-weight: 600;
	padding: 15px 0 0 10px;
	background: transparent;
	border-left: solid 6px;
	border-image: linear-gradient(to bottom, #B30101, #FE0002) 1;
	margin-bottom:30px;
}

.caption p.prof {
	font-size:12px;
	line-height: 1.2;
}
	
.caption h3 {
	font-size:20px;
	letter-spacing: 0.01em;
	text-align: left;
	}
	
.caption h3 span{
	font-size:15px;
	display: inline-block;
	margin-left:5px;
	}


@media screen and (min-width:950px) {
    .col-02-img{
        max-width: 400px;
		margin:0;
    } 
	
	.caption {
		padding: 15px 0 5px 10px;
	}
	
	.caption p.prof {
		font-size:15px;
		line-height: 1.2;
		margin-bottom:7px;
	}
	
	.caption h3 {
		font-size:24px;
		letter-spacing: 0.01em;
		line-height: 1.2;
	}
	
	.caption h3 span{
		font-size:18px;
		display: inline-block;
		margin-left:5px;
	}
}


/*　本文内テキスト
----------------------------------------------------------*/
.txt-01{
	margin-bottom:1em;
	display: flex;
}

.txt-01-name{
	color:#074D9F;
	font-weight: 600;
	display: block;
	width: 3em;
}
.txt-01-txt{
	display: block;
	width: calc(100% - 3em)
}


/*　col
----------------------------------------------------------*/
@media screen and (min-width:950px) {
	.col-01 {
		width:719px;
		margin:0 auto;
	}
	.col-02 {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
	}
	
	.col-02.reverse {
        flex-direction: row-reverse;
	}
	
	.col-02-img{
        width:40%; 
	}
	.col-02-txt{
        width:52.6%; 
	}
}

/*　bgcolor
----------------------------------------------------------*/
.bgcolor {
  width: 100%;
  margin: 0;
  padding: 30px 0 15px 0;
  position: relative;
  top: 30px;
}
.bgcolor::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #F4F4F4;
  transform: skewY(-7deg);
  z-index: -1;
}

@media screen and (min-width:950px) {
	.bgcolor {
		padding: 60px 0 30px 0 ;
		top: 60px;
	}
    
}

/*　section
----------------------------------------------------------*/
section.sec03{
	padding-top:60px;
	padding-bottom:30px;
}

@media screen and (min-width:950px) {
	section.sec03{
		padding-top:120px;
		padding-bottom:60px;
	}
}


/*　フッター
----------------------------------------------------------*/
.footer{
	border-bottom: 1px solid #ddd;
	text-align: center;
}

.footer h3{
	font-weight: 600;
	font-size:16px;
}

.logo{
    width:180px;
    margin:0 auto 20px auto;
}
.btn-01 {
	text-align: center;
}
.btn-01 a {
	background: #DD0000;
	color: #fff !important;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	width: 85%;
	max-width: 400px;
	font-size: 15px;
	display: block;
	margin-left: auto;
	margin-right: auto;
    position: relative;
    height:50px;
	line-height: 50px;
}

.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 h3{
		font-size:20px;
	}
    .logo{
        width:220px;
        margin:0 auto 20px auto;
	}
    
	.btn-01 a {
		width: 464px;
		height:64px;
        line-height: 64px;
		font-size: 18px;
        padding:0;
	}
    
    .btn-01 a:after{
        right:20px;
        top:23px;
    }
}
