/* ============================================================
PC
==============================================================*/

@media (min-width: 762px) {
	

    
	/* ============================================================
 	main vi 
	==============================================================*/
    
    
    
	#main_ttl_wrap{
		width: 100%;
		height: 352px;
		position: relative;
		overflow: hidden;
		background-size: cover;
	}
	
	#main_ttl_wrap .txt_wrap h1{
		font-family: 'Noto Serif JP', sans-serif;
		font-weight: 500;
		font-size: 4.6rem;
		color: #000;
		text-align: center;
		letter-spacing: 0.4rem;
		padding: 90px 0 0;
	}
	
	#main_ttl_wrap .txt_wrap h1:after{
		content:"";
		display:block;
		position:absolute;
		bottom: -32px;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color:#fc8418;
		width: 92px;
		height: 7px;
	}

	#main_ttl_wrap span{
		display: block;
		font-family: 'Alata', sans-serif;
		font-weight:200;
		font-size: 2.4rem;
		color: #fff;
		margin: 0 0 6px;
		text-align: center;
	}
	
	#main_ttl_wrap .txt_wrap span{
		display:block;
		font-weight: 500;
		font-size: 3.0rem;
		font-family: 'Noto Serif JP', sans-serif;
		color: #000;
		background:none;
		text-align: center;
		letter-spacing: 0.2rem;
		padding:0;
		margin: 24px 0 -12px;
	}
	
	#main_wrap .txt_wrap p{
		font-family: 'Noto Serif JP', serif;
		font-weight: 400;
		font-size: 1.5rem;
		text-align: center;
		color: #fff;
		letter-spacing: 0.1rem;
		white-space: nowrap;
		line-height: 200%;
	}

	
    
    
    /* ============================================================
 	common
	==============================================================*/
    
    h2.ttl{
		font-family: 'Noto Serif JP', serif;
		font-weight:200;
		font-size: 3.8rem;
		letter-spacing:0.5rem;
		white-space: nowrap;
		padding: 10px 0 10px;
	}
	span.eng_txt{
		display:block;
		font-family: 'EB Garamond', serif;
		font-weight:200;
		font-size: 2.7rem;
		color: #000;
		letter-spacing: 0.4rem;
		opacity:0.5;
		text-indent: 3px;
	}
	
	p.body_txt{
		font-family: 'Noto Serif JP', serif;
		font-weight:200;
		font-size: 1.6rem;
		letter-spacing: 0.1rem;
		line-height: 200%;
		width:620px;
		padding: 0 0 40px;
	}
    	
	
	/* ============================================================
 	section 01
	==============================================================*/

	#sec01{
		width: 100%;
		position:relative;
		padding: 0 0 40px;
	}

	#sec01 .background-blue {
		position: relative;
		top: -55px;
		height: 576px;
		width: 44%;
		z-index: 2;
		background: rgba(0,190,255,0.75);
	}

	#sec01 .l_box{
		float:left;
		width: 400px;
		padding: 70px 0 0;
	}

	#sec01 .r_box{
		float:right;
		width: 548px;
	}

	#sec01 h2{
		font-family: 'Noto Serif JP', sans-serif;
		font-weight: 500;
		font-size: 3.2rem;
		color: #000;
		line-height: 155%;
		z-index: 2;
		margin: 0 0 35px;
	}
	#sec01 p{
		font-size: 1.4rem;
		font-family: 'Noto Sans JP', sans-serif;
		line-height: 193%;
	}

	#sec01 .h3_box{
		position:absolute;
		color:#fff;
		z-index:50;
		top: 60%;
		left: 20%;
	}

	#sec01 .h3_box h3{
		font-family: 'Noto Serif JP', sans-serif;
		font-size: 2.6rem;
		letter-spacing: 0.3rem;
	}

	#sec01 .h3_box span{
		display:block;
		font-size: 1.4rem;
		font-family:'Noto Sans JP', sans-serif;
		margin: 0 0 9px;
		letter-spacing: 0.1rem;
	}

	#sec01 ul.flex{
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	#sec01 ul.flex li{
		width:300px;
		position: relative;
		margin: 0 0 92px;
	}

    	
	
	/* ============================================================
 	section 02
	==============================================================*/

	#sec02{
		padding: 160px 0 0;
	}

	#sec02 h2{
		font-size: 3.8rem;
		font-family:'Noto Serif JP', sans-serif;
		position:relative;
		margin: 0 0 56px 34px;
		line-height: 147%;
		letter-spacing: 0.4rem;
		font-weight: 600;
	}

	#sec02 h2:before{
		content:"";
		position:absolute;
		top: -94px;
		left: -690px;
		background: rgba(0,190,255,0.25);
		width: 1000px;
		height: 400px;
		z-index: 0;
	}

	#sec02 h2:after{
		content:"";
		position:absolute;
		top: 25px;
		left: -77px;
		background: #00beff;
		width: 48px;
		height: 10px;
	}

    #sec02 .box_b{
    	position:relative;
    	margin: 0 0 215px;
    }

    #sec02 ul.btn_list{
    	width:600px;
    	position:absolute;
    	top: -36px;
    	right:0;
    }
    
    #sec02 ul.btn_list li{
    	position:relative;
    }

    #sec02 ul.btn_list a .img_box{
        width: 100%;
        line-height: 0;
     }     
     
    #sec02 ul.btn_list a .img_box img{
        width: 100%;
        line-height: 0;
        transition: all 0.5s ease 0s;
    }

	#sec02 .btn_list li a:hover .img_box img{
		opacity:0.5;
	}

    #sec02 .p_btn_box{
    	position:absolute;
    	top: 29px;
    	background: rgba(0,190,255,0.8);
    	padding: 28px 0 28px 24px;
    	width: 300px;
    }

    #sec02 .p_btn_box p{
    	color:#fff;
    	font-size: 1.6rem;
    	font-family: 'Noto Sans JP', sans-serif;
    	font-weight: 400;
    }

    #sec02 .p_btn_box p span{
    	display:block;
    	font-size: 3.0rem;
    	font-family: 'Alata', sans-serif;
    }

    #sec02 ul.material{
    	background: rgba(0,190,255,0.1);
    	padding: 118px 0 18px 93px;
    	width: 1600px;
    	margin: -29px 0 0;
    }

    #sec02 ul.material li{
    	width:830px;
    	background-color:#fff;
    	padding: 30px 40px 32px;
    	margin: 0 0 55px;
    	position: relative;
    	border-left:1px solid #00beff;
    }

	#sec02 ul.material li:before{
		content: "";
		display: block;
		width: 50px;
		height:50px;
		background: #ffffff;
		position: absolute;
		bottom: -4px;
		left: 50%;
		transform:translate(-50%, 0) rotate(-45deg);
	}



	#sec02 ul li .l_box{
		float:left;
		width: 400px;
	}

	#sec02 ul li .r_box{
		float:right;
		width: 417px;
		margin: 13px 0 0;
		position: relative;
	}

	#sec02 ul li .r_box .img_box{
		position:absolute;
		width: 200px;
		top: -36px;
		right: -52px;
	}

	#sec02 ul li h3{
		line-height: 160%;
		font-size: 2.8rem;
		font-family:'Noto Serif JP', sans-serif;
		position:relative;
		margin: -50px 0 15px;
	}

	#sec02 ul li h3 span{
		display:block;
		font-family: 'Alata', sans-serif;
		color: #00beff;
		font-size: 5rem;
		margin: 0 0 12px;
	}

	#sec02 ul li h4{
		font-size: 1.4rem;
		font-family:'Noto Sans JP', sans-serif;
		line-height: 180%;
		
	}

	#sec02 ul li p{
		font-size: 1.4rem;
		font-family:'Noto Sans JP', sans-serif;
		line-height: 193%;
	}

	#sec02 ul li h5{
		font-size: 1.4rem;
		font-family:'Noto Sans JP', sans-serif;
		line-height: 193%;
		background-color:#00beff;
		box-sizing: border-box;
		padding: 0 15px;
		color: #fff;
	}

	#sec02 ul .r_box p{
		font-size: 1.4rem;
		font-family: 'Noto Sans JP', sans-serif;
		line-height: 193%;
		padding: 13px 15px;
		background: #e5f8ff;
	}


	/* ====purple=====*/

	#sec02 .box_b:nth-child(2) h2:before{
		background: rgba(120,150,240,0.2);
	}

	#sec02 .box_b:nth-child(2) h2:after{
		background: #7896f0;
	}
    #sec02 .box_b:nth-child(2) .p_btn_box{
    	background: rgba(120,150,240,0.8);
    }    

    #sec02 .box_b:nth-child(2) ul.material{
    	background: rgba(120,150,240,0.1);
    }

    #sec02 .box_b:nth-child(2) ul.material li{
    	border-left:1px solid #7896f0;
    }

    #sec02 .box_b:nth-child(2) ul li h3 span {
		color: #7896f0;
	}

	#sec02 .box_b:nth-child(2) ul li h5{
		background-color: #7896f0;
	}

	#sec02 .box_b:nth-child(2) ul .r_box p{
		background: #f1f4fd;
	}
	


	/* ====green=====*/

	#sec02 .box_b:nth-child(3) h2:before{
		background: rgba(0,210,150,0.2);
	}

	#sec02 .box_b:nth-child(3) h2:after{
		background: #00d296;
	}
    #sec02 .box_b:nth-child(3) .p_btn_box{
    	background: rgba(0,210,150,0.8);
    }    

    #sec02 .box_b:nth-child(3) ul.material{
    	background: rgba(0,210,150,0.1);
    }

    #sec02 .box_b:nth-child(3) ul.material li{
    	border-left:1px solid #00d296;
    }

    #sec02 .box_b:nth-child(3) ul li h3 span {
		color: #00d296;
	}

	#sec02 .box_b:nth-child(3) ul li h5{
		background-color:#00d296;
	}

	#sec02 .box_b:nth-child(3) ul .r_box p{
		background: #ebffef;
	}

    	
	
	/* ============================================================
 	section 03
	==============================================================*/

	#sec03{
		padding: 0px 0 34px;
	}

	    /* ========　e_btn_list ==========*/
		
	#sec03 ul.e_btn_list {
    width: 750px;
    margin: 75px auto 80px;
    }
    
     #sec03 ul.e_btn_list li{
     }
     
     #sec03 ul.e_btn_list a{
         display: block;
         position: relative;
         transition: all 0.5s ease 0s;
     }
     
     #sec03 ul.e_btn_list a p{
         transition: all 0.5s ease 0s;     	
     }
     
     #sec03 ul.e_btn_list a .img_box{
         width: 100%;
         line-height: 0;
     }     
     
     #sec03 ul.e_btn_list a .img_box img{
         width: 100%;
         line-height: 0;
         transition: all 0.5s ease 0s;
     }
     
     #sec03 ul.e_btn_list a .icon_box{
     	position: absolute;
     	top: 40px;
     	right: 35px;
     }
     
     #sec03 ul.e_btn_list a .icon_box img{
     	width: 30px;
     }

	#sec03 .e_btn_list li a:hover .img_box img{
		opacity:0.5;
	}

	#sec03 .btn_list li a:hover p{
        right: -15px;
	}

    #sec03 ul.e_btn_list a h3{
         font-family: 'Noto Serif JP', sans-serif;
         font-weight: 400;
         font-size: 2.8rem;
         color: #ffffff;
         position: absolute;
         top: 20px;
         left: 50%;
         transform: translate(-50%, 0);
         transition: all 0.5s ease 0s;
    }
    
    #sec03 ul.e_btn_list a p{
         font-family: 'Noto Sans JP', sans-serif;
         font-weight: 400;
         font-size: 1.6rem;
         line-height: 140%;
         position: absolute;
         bottom: 11px;
         left: 50%;
         transform: translate(-50%, 0);
         color: #fff;
         padding: 14px 97px;
     }    	
	


    #sec_more_info .f_btn_list li {
        width: 22%;
    }
}