@charset "utf-8";
@import url(reset.css);/*Reset_BrowserDefaultStyle*/

/* ----------------------------------------
	> common
/* ---------------------------------------- */
body {
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	position: relative;
}
ul{
	list-style-type: none;
}
.font_meiryo {
	font-family: Meiryo,sans-serif;
}
.under_line {
	font-weight: bold;
	text-decoration: underline; 
}
.button {
	width: 200px;
	height: 40px;
	line-height: 40px;
    display: inline-block;
    position: relative;
    text-decoration: none;
	background: linear-gradient(-180deg, #00a1e9, #a0d8ef);
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
	color: #ffffff;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
	font-weight: bold;
	font-family: "Sawarabi Gothic";
	text-shadow: 0px 1px 3px #555555;
}
.button:hover {
	background: linear-gradient(-180deg, #ea5550, #f39800);;	
}
.button:active{
    -ms-transform: translateY(3px);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
	background: linear-gradient(-180deg, #ea5550, #f39800);	
}
.under_line_blue {
	font-weight: normal;
    background: linear-gradient(transparent 70%, #a0e5ff 70%);
}


/* ----------------------------------------
	> header
/* ---------------------------------------- */
header {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
.header_inner {
	width: 1000px;
	height: 100px;
	margin: 0 auto;
	padding-top: 10px;
	overflow: hidden;
}
.header_inner .logo_area{
	float: left;
}
.header_inner .topbutton_area {
	float: right;
}
/* ----------------------------------------
	> footer
/* ---------------------------------------- */
footer {
	border-top: 1px solid #95d6f9;
}
.footer_inner {
	width: 1000px;
	margin: 0 auto;
	padding-top: 10px;
}
.copyrights {
	margin-top: 10px;
	text-align: center;
	font-size: 0.8em;
	margin-bottom: 50px;
}
.pagetop {
	position: fixed;
	z-index: 10;
	bottom: 50px;
	right: 30px;
	display: none;
}
.pagetop img {
	height: 60px;
	opacity: 0.8;
}

/* ----------------------------------------
	> contens
/* ---------------------------------------- */

/*---------- contents_common ----------*/
p.center {
	text-align: center;
}
.contents_inner {
	width: 960px;
	margin: 0 auto;
	padding: 20px;
}
.contents section {

}
.contents p {
	line-height: 1.7;
	margin-bottom: 30px;	
}
.contents ul {
	line-height: 1.7;
	margin-bottom: 30px;
	color: #1e366a;
	padding: 0.5em 0 0.5em 0;
	list-style-type: disc;
}
/*
.contents ul li{
	line-height: 1.7;
	padding: 0.5em 0;
	font-weight: bold;
}*/


/*---------- 申し込みフォーム ----------*/
.ms_form_box {
/*	border: 1px solid #aaaaaa;*/
    margin: 2em 0;
    color: #5d627b;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	font-family: Meiryo,sans-serif;
	background-color: #f3ffe5;
	border-radius: 10px;
}

.ms_form_header {
	background-color: #7abb27;
	color: #ffffff;
	padding: 15px;
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 30px;
	text-shadow: 1px 1px 1px #666666;
	border-radius: 10px 10px 0 0;
	text-align: center;
}
.ms_form_body {
	width: 400px;
	text-align: left;
	margin: 0 auto;
}
.form_list {
	font-weight: bold;
}
.text, .text80{
	height: 1.5em;
}
.text_email {
	width: 100%;
}
.submit_btn {
	text-align: center;
}
.ms_form_box ul {
	list-style-type: none;
}
.ms_form_box .ms_form_footer {
	margin-top: 10px;
	text-align: center;
	font-size: 0.7em;
}
.ms_form_box .ms_form_footer a {
	font-size: 0.7em;
	color: #5d627b;
	font-weight: normal;
}

/*---------- top_visual ----------*/
.top_visual {
	height: 600px;
	position: relative;
	overflow: hidden;
	background-image: url(../images/free_manual/top_back_image.jpg);
	background-position: left top;
	background-repeat: repeat-x;	
 }
.top_visual_image {
	height: 600px;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}
.top_text {
	position: absolute;
	top: 0;
	left: 0;
	display: none;	
}
.top_visual h1 {
	font-size:2em;
	line-height: 1.5;
	text-shadow: 1px 1px 2px #000000;
	margin-bottom: 20px;
	font-weight: 900;
}
.top_visual p {
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 20px;
}
/*---------- section_top_application ----------*/
.section_top_application {
	text-align: center;
	padding: 30px 10px;
	margin-top: 50px;
}
/*---------- section_intro ----------*/
.section_intro {
	text-align: center;
	background-image: url(../images/free_manual/nayami_back.png);
	background-position: left bottom;
	background-repeat: repeat-x;
	padding: 0px;
}

/*---------- section_information ----------*/
.section_information {
	margin-top: 100px;
	text-align: center;
}
.section_information h2 {
	font-size: 2.3em;
	padding: 20px 0 50px 0;
	text-align: center;
}
.section_information ul {
	list-style-type: none;
	display: inline-block;
}
.section_information ul li{ 
	font-size: 1.3em;
	background-image: url(../images/list_check.png);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 30px;
	padding-left: 35px;
	line-height: 2.3;
	font-weight: bold;
	text-align: left;
	border-bottom: dotted 1px #aaaaaa;
}
.section_information p {
	font-size: 1.2em;
}
.section_information .large {
	font-size: 1.8em;
	font-weight: bold;
}
/*---------- section_manual_info ----------*/
.section_manual_info {
	text-align: center;
}
.section_manual_info .manual_img {
	margin-top: 50px;
}
.section_manual_info .manual_info_point {
	margin-top: 50px;
	margin-bottom: 50px;
	font-size: 1.2em;
}
/*---------- section_download ----------*/
.section_download {
	margin: 30px auto;
	background-color: #bcfaff;
	text-align: center;
	padding: 50px 0;
}
.section_download .contents_inner {
	position: relative;
}
.section_download > .contents_inner > img {
	position: absolute;
	top: 120px;
	left: 50px;
	width: 200px;
}
/*
.section_download .download_button_box {
	width: 500px;
	overflow: hidden;
	margin: 0 auto;
}
.section_download .download_img {
	float: left;
}
.section_download .diwnload_button {
	float: left;
	padding-top: 50px;
}*/
/*---------- section_merit ----------*/
.section_merit .text_bord{
	width: 80%;
	margin: 100px auto;
	border: solid 25px #382a1d;
	border-radius: 10px;
	padding: 40px;
	background-color: #fff9f4;
}
.section_merit h2 {
	font-size: 1.5em;
	margin-bottom: 50px;
	text-align: center;
}
.section_merit h3 {
	font-size: 1.1em;
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: solid 1px #ddc9b5;
}
/*---------- section_about_free ----------*/
.section_about_free h2{
	font-size: 2.3em;
	color: #445cd5;
	text-align: center;
	padding-bottom: 50px;
}
.section_about_free .section_about_free_text {
	font-size: 1.2em;
	font-weight: bold;
}
.section_about_free a {
	font-size: 1.5em;
	width: 450px;
}
.section_about_free .contents_inner .download_button_area {
	text-align: center;
	margin-bottom: 5px;
}
.section_about_free .contents_inner .ms_form_box {
	margin-top: 0px;
}
.orange_text {
	color: #ff8b24;
	font-family: Meiryo,sans-serif;
	font-weight: bold;
}
/*---------- section_profile ----------*/
.section_profile {
	background-color: #f7f6f4;
	background-image: url(../images/free_manual/profile_back.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	height: 500px;
	padding: 150px;
}
.section_profile .profile_box {
	width: 90%;
	background-color: #ffffff;
	margin: 0 auto;
}
.section_profile h2 {
	background-color: #6ecefd;
	padding: 20px;
	color: #ffffff;
	text-align: center;
	font-size: 1.3em;
	text-shadow: 1px 1px 1px #777777;
}
.section_profile .profile_image {
	padding: 50px 20px;
	text-align: center;
}
.section_profile .profile_text {
	font-size: 0.85em;
	padding: 50px 20px 40px 0;
}
.section_profile .profile_name_area {
	font-weight: bold;
	border-bottom: solid 1px #07467b;
	margin-bottom: 10px;
	overflow: hidden;
}
.section_profile .profile_name_area img{
	float: right;
	padding-right: 10px;
}
.section_profile .profile_name_area .profile_name{
	float: left;
	margin-bottom: 0;
}
.section_profile .profile_name_area .name {
	font-size: 1.5em;
}

/*---------- section_voice ----------*/
.section_voice {
	padding-top: 100px;
	background-color: #effaff;
}
.section_voice h2 {
	text-align: center;
	font-size: 2em;
	margin-bottom: 50px;
}
.section_voice .contents_inner div {
	background-color: #ffffff;
	padding: 20px;
	margin-bottom: 30px;
	box-shadow: 1px 1px 1px #cccccc;
	line-height: 1.2;
	border-radius: 10px;
}
/*---------- section_question ----------*/
.section_question {
	padding-top: 100px;	
}
.section_question > div > div {
	background-color: #effaff;
	padding: 20px;
	margin-bottom: 30px;
	box-shadow: 1px 1px 1px #cccccc;
	line-height: 1.2;
	border-radius: 10px;	
}
.section_question h2{
	text-align: center;
	font-size: 2em;
	margin-bottom: 50px;	
}
.section_question h3 {
	margin-bottom: 20px;
    line-height: 1.5;
}
.section_question .answer_title {
	font-weight: bold;
	padding-left: 20px;
	margin-bottom: 0px;
}
.section_question .answer_body {
	padding-left: 40px;
}
	
.q_icon, .a_icon {
    float: left;
    vertical-align: top;
    line-height: 1.5;
    width: 1.5em;
    height: 1.5em;
    margin-right: 10px;
    border-radius: 50%;
    text-align: center;
    color: #ffffff;
}
.q_icon {
	background-color: #07467b;
}
.a_icon {
	background-color: #0d76ce;
}
/*---------- section_end ----------*/
.section_end {
	text-align: center;
	padding: 50px 0;
}
.section_end h2 {
	font-size: 1.5em;
	margin-bottom: 50px;
}
.section_end p {
	font-weight: bold;
}
.section_end a {
	width: 500px;
	/*padding-left: 150px;*/
}
.section_end_button_area {
	position: relative;
	display: inline-block;
}
.mail_icon {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 100px;
}
.section_end {  
  background: linear-gradient(to bottom, #b2d7ff 0%, #ffe8f4 100%);
  opacity: 0.9;
  animation: huerotator 3s infinite alternate;
}
@keyframes huerotator {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }

  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}
/* ----------------------------------------
	> ボタンスタイル
/* ---------------------------------------- */
/*---------- button design ----------*/
.button_area {
	margin-top: 100px;
	height: 50px;
}
.square_btn{
    display: inline-block;
    padding: 0.5em 1em;
	width: 300px;
	font-weight: bold;
	font-size: 1.2em;
    text-decoration: none;
	text-align: center;
    color: #FFF;
	text-shadow: 1px 1px 1px #968d85;
    border-bottom: solid 4px #968d85;
    border-radius: 3px;
	background: #7abb27;
}
.square_btn:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}
.circle_btn{
    display: inline-block;
    text-decoration: none;
    background: #7abb27;
    color: #FFF;
    width: 150px;
    height: 110px;
	padding-top: 40px;	
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #bd6565;
    transition: .4s;
	text-shadow: 1px 1px 1px #968d85;
	font-size: 1.2em;
}
.circle_btn:active{
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    border-bottom: none;
}

/* ----------------------------------------
	> 見出しスタイル
/* ---------------------------------------- */
/*　見出しスタイル　青アンダーライン　---------- */
.underline_blue_underline {
	padding-bottom: 15px;
	position: relative;
}
.underline_blue_underline::before { 
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 150px;
    height: 2.5px;
    margin: 0 auto;
    text-align: center;
	background-color: #1b62ad;
    background-position: center;
    background-repeat: no-repeat;
}
/*　見出しスタイル　青リボン画像　---------- */
.ribbon_blue {
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	line-height: 130px;	
	margin-bottom: 60px;
	padding-bottom: 20px;		
	background-image: url(../images/blue_ribon.png);
    background-position: center;
    background-repeat: no-repeat;
	height: 130px;
	color: #fefff9;
	text-shadow: 1px 1px 1px #000000;
}


/* ----------------------------------------
	> PC用スタイル（771px以上）
/* ---------------------------------------- */
@media screen and (min-width:771px) {
	.br_pc { display:block; }/*PC用改行*/
	.br_sp { display:none; }/*スマホ用改行*/

	
	/*---------- section_profile ----------*/
	.profile_box:after {
		display: block;
		clear: both;
		height: 0px;
		visibility: hidden;
		content: " ";		
	}
	.profile_image {
		float: left;
		width: 30%;
	}
	.profile_text {
		float: right;
		width: 60%;
	}	

	/* ----------------------------------------
		> ふきだしスタイル
	/* ---------------------------------------- */
	.balloon{
		position: relative;
		padding: 20px;
		background-color: #ffffff;
		border-radius: 5px;
		width: 300px;
	}
	.balloon::before{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		right: -15px;
		top: 20px;
		border-left: 15px solid #ffffff;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}
	.balloon::after{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		right: -12px;
		top: 20px;
		border-left: 15px solid #ffffff;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}	
	/*　見出しスタイル　青リボン　---------- */
	.ribbon_blue_2 {
		position: relative;
		vertical-align: middle;
		text-align: center;
		box-sizing: border-box;
		width: 900px;
		margin: 20px auto;
	}
	.ribbon_blue_2:before{/*左側のリボン端*/
		content: '';
		position: absolute;
		width: 10px;
		bottom: -10px;
		left: 0px;
		z-index: -2;
		border: 50px solid #1b13af;
		border-left-color: transparent;/*山形に切り抜き*/
	}
	.ribbon_blue_2:after{/*右側のリボン端*/
		content: '';
		position: absolute;
		width: 10px;
		bottom: -10px;
		right: 0px;
		z-index: -2;
		border: 50px solid #1b13af;
		border-right-color: transparent;/*山形に切り抜き*/
	}
	.ribbon_blue_2 h2 {
		width: 710px;
		margin: 0 auto;
		position: relative;
		background: #100a84;/*真ん中の背景色*/
		background: linear-gradient(#453bf9, #100a84);
	}
	.ribbon_blue_2 h2:before {
		position: absolute;
		content: '';
		top: 100%;
		left: 0;
		border: none;
		border-bottom: solid 10px transparent;
		border-right: solid 15px #397eb5;/*左の折り返し部分*/
	}
	.ribbon_blue_2 h2:after {
		position: absolute;
		content: '';
		top: 100%;
		right: 0;
		border: none;
		border-bottom: solid 10px transparent;
		border-left: solid 15px #397eb5;/*右の折り返し部分*/
	}	
}

/* ----------------------------------------
	> スマホ用スタイル（770px以下）
/* ---------------------------------------- */
@media screen and (max-width:770px) {
	.br_pc { display:none; }/*PC用改行*/
	.br_sp { display:block; }/*スマホ用改行*/	
	body {
		font-size: 0.9em;
	}
	.header_inner {
		width: 100%;
	}
	.footer_inner {
		width: 100%;
	}
	.contents_inner {
		width: auto;
	}
	/*---------- footer ----------*/
	.pagetop {
		bottom: 10px;
		right: 10px;
	}
	
	.section_top_application {
		margin-top: 0px;
	}
	/*---------- top_visual ----------*/
	.top_visual {
		height: 150px;
		background-image: none;
	 }
	.top_visual_image img {
		width: 100%;
	}
	.top_visual_text {
		width: 90%;
		margin: 20px auto;
		padding: 20px 5%;	
	}	 
	.top_visual h1 {
		color: #ffffff;
		font-size:1.8em;
		line-height: 1.5;
		width: 100%;
	}
	/*---------- section_intro ----------*/
	.section_intro {
		background-image: none;		
	}
	.contents .list_01 {
		width: 90%;
	}
	.section_intro img {
		width: 100%;
	}	 
	/*---------- section_information ----------*/
	.section_information h2 img{
		width: 100%;
	}
	.section_information ul li{ 
		font-size: 1em;
		background-size: 20px;		
	}
	.section_information p {
		font-size: 1em;
	}
	.section_information .large {
		font-size: 1.8em;
	}
	/*---------- section_merit ----------*/
	.section_merit {
		margin-top: 70px;
	}
	.section_merit .contents_inner {
		padding: 20px 5px;
	}
	.section_merit .text_bord{
		width: 75%;
		margin: 0 auto;
		border: solid 25px #382a1d;
		border-radius: 10px;
		padding: 5%;
		background-color: #fff9f4;
	}
	.section_merit h2 {
		font-size: 1.5em;
		margin-bottom: 50px;
		text-align: center;
	}
	.section_merit h3 {
		font-size: 1.1em;
		margin-bottom: 10px;
		padding-bottom: 5px;
		border-bottom: solid 1px #ddc9b5;
	}	
	
	/*---------- section_manual_info ----------*/
	.manual_img {
		text-align: center;
		padding-top: 3px;
	}
	.manual_img img {
		width: 80%;
		box-shadow: 0 0 5px rgba(0,0,0,.5);
	}
	.manual_topic img {
		width: 100%;
	}
	.section_manual_info h2 img {
		width: 100%;
	}
	/*---------- section_download ----------*/
	.section_download {
		/*height: 250px;*/
	}
	.section_download > .contents_inner > img {
		display: none;
	}	
	/*
	.section_download .download_button_box {
		width: 100%;
	}
	.section_download .download_img img {
		width: 150px;
		margin-top: 30px;
	}
	*/
	/*---------- section_about_free ----------*/
	.section_about_free a {
		width: 90%;
	}
	.section_about_free h2 img {
		width: 100%;
	}
	/*.section_about_free .download_button_area {
		padding: 30px 5px;
	}*/
	.section_about_free .download_button_area a {
		font-size: 1.2em;
	}
	/*---------- section_profile ----------*/	
	.section_profile {
		padding: 70px 5px;
		height: auto;
	}
	.section_profile .profile_image img{
		width: 100px;
	}
	.section_profile .profile_image {
		padding: 20px;
	}
	.section_profile .profile_text {
		padding: 10px;
	}
	/*---------- section_end ----------*/
	.section_end a {
		width: 95%;
		font-size: 1.2em;
		/*padding-left: 2.5%;*/
	}
	.section_end_button_area {
		position: relative;
		display: inline-block;
	}
	.mail_icon {
		display: none;
	}
	/* ----------------------------------------
		> ふきだしスタイル
	/* ---------------------------------------- */	
	.balloon{
		position: relative;
		padding: 20px;
		background-color: #ffffff;
		border-radius: 5px;
		width: 90%;
		text-align: center;
	}
	.balloon::before{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		left: 0;
		right: 0;
		bottom: -15px;
		margin: 0 auto;
		border-top: 15px solid #ffffff;
		border-right: 15px solid transparent;
		border-left: 15px solid transparent;
	}

	/* ----------------------------------------
		> 見出しスタイル
	/* ---------------------------------------- */	
	/*　見出しスタイル　青リボン　---------- */
	.ribbon_blue_2 {
		position: relative;
		vertical-align: middle;
		text-align: center;
		box-sizing: border-box;
		width: 95%;
		margin: 20px auto;
	}
	
	/* ----------------------------------------
		> 申し込みフォーム
	/* ---------------------------------------- */	
	.ms_form_body {
		width: 80%;	
	}
	.text80 {
		width: 35%;
	}
	.square_btn {
		width: 80%;
		margin: 0 auto;
	}
}