@charset "utf-8";
/* CSS Document */

/* 横幅が750px以下の場合に適用するスタイル */
@media (max-width: 750px) {
	.sm_block{
		display:block;
	}
	
  body{
	margin:0;
	padding:0;
	width: 100%;
}

.wrapper{
	width:100%;
	margin:0;
	padding:0;
}
div,h1,p{
	overflow:hidden;
}
/*----------------------------
  ヘッダー
------------------------------*/	
	header h1{
	font-size:25px;
	padding:0.5em 0;
	width:85%;
	margin: auto;
}

/*----------------------------
  フッター
------------------------------*/
	.footer_company{
	display: flex;
	flex-flow: row wrap;
	margin-bottom:1em;
	width: 80%;
    margin: 0 auto 3em auto;
	}
		
	.footer_company .frame_60{
	order: 2;
	margin:auto;
	text-align:left;
	}
	
	.footer_company .company a {
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    }

	.footer_company .frame_60 p{
	font-size:17px;
	line-height:140%;
	}
	
	.footer_company .frame_40{
	order: 1;
	text-align: center;
	}
	
    .footer_company .frame_40 img {
	width:100%;
	}

/*----------------------------
  フォント
------------------------------*/	
	.style_font30{
	font-size:20px !important;
	}

/*----------------------------
　セクション1
------------------------------*/
    .section1,
	.section2,
	.section3{
	margin-bottom:2em;
	}

	.section1 h1{
	width:85%;
	margin:auto;
	padding:1em;
	line-height:130%;
	color:#FFF;
	font-size:20px;
	text-align:center;  
	text-shadow: 0 0 10px #006600;
	}

.section1 p{
	text-shadow: 1px 1px 10px #FFF,
	             -1px 1px 10px #FFF,
				 1px -1px 10px #FFF,
				 -1px -1px 10px #FFF;
	}

	.section1 .frame_85{
	display: flex;
	flex-flow: row wrap;
	margin-bottom:1em;
	}
		
	.section1 .frame_60{
	order: 2;
	width:90%;
	margin:auto;
	text-align:left;
	}
	
	.section1 .frame_60 p{
	font-size:17px;
	margin-bottom:1em;
	line-height:120%;
	}
	
	.section1 .frame_40{
	order: 1;
    text-align: center;
	}
	
	.section1 .frame_40 img {
    width: 90%;
	}
	
/*----------------------------
　セクション2
------------------------------*/
    .section2 div,
	.section3 .frame_85{
	width:90%;
	margin: 0 auto 1em auto;
	}
	
	.section2 div:last-child{
	margin: 0 auto 0 auto !important;
	}
	
	.section2 div img {
    width: 100%;
	}
	
	.section2 div p{
	padding-bottom:0.5em;
	line-height:120%;
	font-size:17px;
	}

/*----------------------------
　セクション3
------------------------------*/
	.section3 .frame_85 div:nth-child(1){
	padding-top: 1em;
	}
	
	.section3 div:nth-child(1) img{
	width:100%;
	}
	 
    .section3 h1 {
    color: #FFF;
	font-size:20px;
	}
	
	.section3 p{
	color:#FFF;
    margin: 1em 0 0 0;
	line-height:120%;
	font-size:17px;
	}
	
	.section3 p:first-letter{
	font-size:20px;
	}
	
	.section3 div:nth-child(2) img {
    width: 49%;
	float:left;
	padding:0.8em 0.1em 0 0.1em; 
	}
	
/*----------------------------
　セクション4
------------------------------*/	
	
	.section4 .frame_85{
	display: flex;
	flex-flow: row wrap;
	margin-bottom:1em;
	}
	
	.section4 .frame_60{
    order: 2;
	width:90%;
	margin:auto;
	text-align:left;
	font-size: 17px;
	line-height: 120%;
	}
	
	.section4 .frame_40{
	order: 1;
	text-align: center;
	}
	
	.section4 .frame_40 img {
        width: 90%;
	}
	



}

/* 横幅が750px以上の場合に適用するスタイル */
@media (min-width: 750px) {
	body{
	background:#FFC;
}
	.wrapper{
	max-width:1200px;
	margin:auto;
	padding:0;
	width:90%;	
	background:#FFF;
}
/*----------------------------
  ヘッダー
------------------------------*/	
	header h1{
	font-size:50px;
	padding:0.8em 0;
}
/*----------------------------
  フッター
------------------------------*/
	.footer_company{
	display:table;
	width:85%;
	margin:0 auto 1em auto;
	}
	
	.footer_company .frame_60{
	display:table-cell;
	vertical-align: top;
	}
	
	.footer_company .frame_40{
	display:table-cell;
	}
	
	.footer_company .frame_40 img {
    width: 100%;
	}
	
	.footer_company .company a{
	font-size:30px;
	}
	
	.footer_company p{
	font-size:20px;
	line-height: 1.3em;
	}
	
/*----------------------------
  フォント
------------------------------*/	
	.style_font30{
	font-size:30px !important;
	}
	
/*----------------------------
フレーム
------------------------------*/	
	.frame_85{
	width:85%;
	margin:auto;
	}
	
	.frame_60{
	width:60%;
	}

	.frame_40{
	width:40%;
	}
	
/*----------------------------
　セクション1
------------------------------*/
    .section1{
	margin:0 auto 1em auto;
	}
	
	.section1 .frame_85{
	padding-bottom:2em;	
	display:table;
	}
	
	.section1 .frame_60{
	display:table-cell;
	vertical-align: top;
	}
	
	.section1 .frame_40{
	display:table-cell;
	}
	
	.section1 .frame_40 img {
    width: 100%;
	}
	
	.section1 p{
	font-size:30px;
	line-height:120%;
	}
	
	.section1 p:nth-child(1){
	padding-bottom:1em;
	}
	
	.section1 p:nth-child(2){
	padding-left:2em;
	}
	
	.section1 h1{
	width:85%;
	margin:auto;
	padding:1em;
	line-height:130%;
	color:#FFF;
	font-size:40px;
	text-align:center;  
	text-shadow: 0 0 10px #006600;
	}

.section1 p{
	text-shadow: 1px 1px 10px #FFF,
	             -1px 1px 10px #FFF,
				 1px -1px 10px #FFF,
				 -1px -1px 10px #FFF;
}
	
/*----------------------------
　セクション2
------------------------------*/
    .section2{
	width:87%;
	margin:0 auto 1em auto;
	display:table;
	}
	
    .section2 div{
	width:33%;
	display:table-cell;
	padding:0 0.5em;
	}
	
	.section2 div img {
    width: 100%;
	}
	
	.section2 div p{
	padding-bottom:0.5em;
	line-height:120%;
	}
	
/*----------------------------
　セクション3
------------------------------*/
    .section3{
	margin:0 auto 1em auto;	
	}
	
	.section3 .frame_85{
	display:table;
	padding:1em 0;
	}

    .section3 .frame_85 div{
	width:50%;
	display:table-cell;
	margin:auto;
	vertical-align:top;
	}
	
	.section3 div:nth-child(1) img{
	width:100%;
	}
	
	.section3 div:nth-child(2){    
    padding: 0 0 0 1em;
	}
	
    .section3 h1 {
    color: #FFF;
    text-align: center;
    font-size: 20px;
    border-top: #FFF solid 2px;
    border-bottom: #FFF solid 2px;
    width: 95%;
    padding: 0.5em 0;
    line-height: 1.3em;
	}
	
	.section3 p{
	color:#FFF;
	width: 95%;
    margin: 1em 0 0 0;
	line-height:120%;
	}
	
	.section3 p:first-letter{
	font-size:30px;
	}

	.section3 div:nth-child(2) img {
    width: 48%;
	float:left;
	padding:0.8em 0.2em 0 0.2em; 
	}
	
/*----------------------------
　セクション4
------------------------------*/	
	
	.section4 .frame_85{
	padding-bottom:2em;	
	display:table;
	}
	
	.section4 .frame_60{
	display:table-cell;
	font-size: 25px;
    vertical-align: middle;
    line-height: 120%;
	}
	
	.section4 .frame_40{
	display:table-cell;
	}
	
	.section4 .frame_40 img {
    width: 100%;
	}
	
}