@charset "utf-8";
/* CSS Document */
.feature_area {
	display:flex;
	justify-content: space-between;
	width:800px;
	height:800px;	
	margin:0 auto;
}
.feature_copy{
	display:flex;
	flex-direction: column;
	width:200px;	
	font-size:4rem;
	font-family:"Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", serif;
	font-weight:bold;
}
.copybox{
	margin-top:60px;
	display:flex;	
}

.feature_copy:nth-child(2) {
    order: 1;
  }
.feature_copy:nth-child(1) {
    order: 2;
  }  
.fadein {
  display:block;
  height:130px;
  opacity : 0;
  transition : all 1s;
  width:200px;
  margin-bottom:50px;
}
.fadein:nth-last-child(1){
	height:500px;
}
.fadein.active{
  opacity : 1;
  writing-mode: vertical-rl;
}

.fadein:not(:last-child) {
  margin-top:0rem;
}

.fadein:last-child{
  margin-top:0rem;
}


.feature_product{
	padding-top:130px;
	text-align:center;
	font-size:1.2rem;
	font-weight:normal;
	line-height:150%;	
}
.feature_product h4 span {
	font-size:2.3rem;
	font-weight:bold;
}


#product_cnt01{
  background: #01458E;
  position: relative;
  border-bottom: 10vw solid #F2F2F2;   /* 三角エリア */
}
#product_cnt01 :after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  border-width: 10vw 49vw 0 50vw;
  border-style: solid;

  border-color: #01458E transparent transparent transparent;  
}
#product_cnt02,#product_cnt03,#product_cnt04 {
	background-color:#F2F2F2;
}

#product_inner_cnt01 {
	width:1100px;
	margin:0 auto;
	text-align:center;
}
#product_inner_cnt01 h4 {
	font-size:2.3rem;
	color:#FFF;
	padding:4rem 0 4rem 0; 
}
#product_inner_cnt01 h5 {
	font-size:2.3rem;
	color:#FFF;
}
#product_inner_cnt01 ul li{
  width: 50%;
  font-size:1.2rem;
  line-height: 45px;
  background-color: #FFF;
  border-radius: 100vh;
  color: #000;
  margin:2rem auto;
}
#product_inner_cnt02 {
	width:1100px;
	margin:0 auto;
	text-align:center;
}
#product_inner_cnt02 h4{
	font-size:2.3rem;
	padding-top:8rem;
	margin-bottom:2rem;
}
#product_inner_cnt02 p{
	line-height:170%;
	font-size:1.3rem;
	padding-top:1.5rem;
	padding-left: 10.0rem;
	margin-bottom: 0;
	text-align: left;
}
#product_inner_cnt03 {
	width:840px;
	margin:0 auto;
	text-align:center;
}
#product_inner_cnt03 h4{
	font-size:2.3rem;
	padding:6rem 0 2rem 0;	
}
#product_inner_cnt03 h5{
	font-size:3.5rem;
	padding:0 0 1rem 0;	
}
#product_inner_cnt03_in{
	display:flex;
	justify-content: space-between;
	text-align:left;	
}
#product_inner_cnt03_in .mt_60{
	margin-top:16.7%;
	margin-left:5%;
}
#product_inner_cnt03_in h5{
	margin-left:5%;
}
#product_inner_cnt03_in span{
	margin-left:5%;
}
#product_cnt04{
	padding:8rem 0;
}
#product_inner_cnt04{
	width:840px;
	margin:0 auto;
	display:flex;
	text-align:left;
	background-color:#FFF;
	padding:1.2rem;	
}
#product_inner_cnt04 .item1{
  flex-basis: 70%;
}
#product_inner_cnt04 h5{
	font-size:2.3rem;
	padding:1rem 0;
}

p#product_bannerbox_btn {
	background-color:#01458E;
	text-align:center;
	padding:0.5rem;
	font-size:1rem;
	color:#FFF;
	margin-top:1.8rem;
}
/* Base button Style*/
#product_bannerbox_btn {
  border-radius: 0px;	 
  border: none;
  display: block;
  width: 450px;
  box-sizing: border-box;
  background: none;
  text-decoration: none;
  text-align: center;
}

#product_bannerbox_btn::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 12px;
  bottom: 0;
  left: 311px;
  width: 12px;
  border-top: 2px solid #FFF;
  transform: rotate(45deg);
}
#product_bannerbox_btn::after{ /* 棒の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left:300px;
  width: 30px; /* 棒の長さ */
  height: 2px; /* 棒の太さ */
  background: #FFF;/* 棒の色 */
}
p#product_bannerbox_btn:hover{
  background-color:FFF;
}
#product_bannerbox_btn:hover{
  color: #004DA0;
  background: #004DA0;/* 棒の色 */ 
}
#product_bannerbox_btn:hover::before {
  border-top:2px solid #004DA0;
}
#product_bannerbox_btn:hover::after{
  border-top:#004DA0;	
  background:#004DA0;
}
@media screen and (max-width: 992px) {
	h1 a {
		position: relative;
		z-index: 1;
	  }
	  .feature_area {
		display: flex;
		width: 100%;
		height: 400px;
		margin: 0 auto;
		flex-direction: row;
	}
	.copybox {
		margin-top: 60px;
		display: flex;
		width: 40%;
	}
	.feature_product {
		padding-top: 10px;
		width: 60%;
		margin: 0;
		text-align: center;
		font-size: 1.2rem;
		font-weight: normal;
		line-height: 150%;
	}
	.feature_product h4 {
		font-size: 1.2rem;
	}
	.feature_product img {
		width: 50%;
	}
	.fadein.active {
    opacity: 1;
	font-family:'Noto Serif JP', serif;
    writing-mode: vertical-rl;
    }
	.feature_copy {
		display: flex;
		flex-direction: column;
		width: 50%;
		font-size: 1.5rem;
		font-family:'Noto Serif JP', serif;
		font-weight: bold;
		align-items: center;
	}
	.fadein:nth-last-child(1) {
		height: 400px;
	}
	.fadein {
		display: block;
		height: 80px;
		opacity: 0;
		transition: all 1s;
		width: 50%;
		margin-bottom: 15px;
	}
	#product_bannerbox_btn::before {
		display: none;
	}
	#product_bannerbox_btn::after {
		display: none;
	}
	#product_inner_cnt01 {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	#product_inner_cnt01 ul li {
		width: 70%;
		font-size: 1.2rem;
		line-height: 45px;
		background-color: #FFF;
		border-radius: 100vh;
		color: #000;
		margin: 2rem auto;
	}
	#product_inner_cnt01 h4 {
		font-size:1.8rem;
		color:#FFF;
		padding:4rem 0 1rem 0; 
	}
	#product_inner_cnt01 h5 {
		font-size:1.8rem;
		color:#FFF;
	}
	#product_inner_cnt02 {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	#product_inner_cnt02 h4 {
		font-size: 1.2rem;
		padding-top: 4rem;
		margin-bottom: 2rem;
	}
	#product_inner_cnt02 img {
		width: 100%;
	}
	#product_inner_cnt02 p {
		line-height: 170%;
		font-size: 0.9rem;
		padding: 1rem;
		text-align: left;
	}
	#product_inner_cnt03 {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	#product_inner_cnt03_in {
		display: flex;
		justify-content: space-between;
		text-align: left;
		flex-direction: column;
	}
	#product_inner_cnt03_in img {
		width: 100%;
	}
	#product_inner_cnt03_in .mt_60 {
		margin-top: 1rem;
		margin-left: 5%;
		margin-bottom: 0;
	}
	#product_inner_cnt03 h4{
		font-size:1.8rem;
		padding:6rem 0 2rem 0;	
	}
	#product_inner_cnt03 h5 {
		font-size: 1.8rem;
		padding: 0;
	}
	#product_inner_cnt04 {
        width: 100%;
        margin: 0 auto;
        display: flex;
        text-align: left;
        background-color: #FFF;
        padding: 1.2rem;
        flex-direction: column;
	}
	#product_cnt04 {
		padding: 4rem 0 2rem 0;
	}
   #product_bannerbox_btn {
    border-radius: 0px;
    border: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: none;
    text-decoration: none;
    text-align: center;
    }
	#product_inner_cnt04 h5 {
		font-size: 1.8rem;
		padding: 0;
	}
}