@charset "utf-8";
body {
	font: 17px/1.7 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","メイリオ",Meiryo,Arial,Verdana,sans-serif;
	text-align: left;
	color:#333333;
	text-align: justify;
	overflow-x: hidden;
	background: url("../images/bg01.jpg") ;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

@media screen and (max-width: 640px) {
    body {
        font: normal 16px/1.7 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","メイリオ",Meiryo,Arial,Verdana,sans-serif;
    }  
}

body .sp-item {
    display: none !important; }
body .pc-item {
    display: block !important; }
	
  @media screen and (max-width: 640px) {
    body {
      min-width: inherit; 
	  height:100%; 
	  }
      body .sp-item {
        display: block !important; }
      body .pc-item {
        display: none !important; } 
	  body .sp-item img {
		width:100%;}
}

@media screen and (max-width: 640px) {
.sp img{
		max-width:90%;	
}
.sp02 img{
		max-width:100%;	
}
.sp03 img{
		max-width:70%;	
}
.sp04 img{
		max-width:95%;	
}
}

.fl_left {
	float: left;
}
.fl_right {
	float: right;
}
.ov_hd {
	overflow: hidden;
}
.bg_none {
	background-image: none!important;
}
a.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.center {
	text-align: center;
}
.right {
	text-align:right;
}
.line_0 {
	line-height: 0;
}


/* ----------------------------------------------------
 
    テキスト装飾
 
---------------------------------------------------- */
em {
	text-decoration: underline;
  font-style: normal;
}

.small {
	font-size: 0.8rem;
}

.red {
	color: #cc0000;
	font-weight: bold;
}

/*赤文字＋大き目*/
.red02 {
	color: #cc0000;
	font-size: 1.2rem;
	font-weight: bold;
}

.yellow02 {
	color: #ffff66;
}

.bold {
	font-weight: bold !important;
}

/*アンダーライン赤*/
.under_red {
border-bottom:solid;
border-color:#FF0000;
border-width:5px;
}

.under_red2 {
border-bottom:solid;
border-color:#FF0000;
border-width:3px;
}


/*マーカー（黄）*/
.marker_y {
	background-color: #ffff00;
	font-weight: bold;
}

/*背景（薄い水色）*/
.bg_sky {
	background-color: #dae9ff;
	padding: 10px;
}

/*背景（薄い水色）*/
.bg_sky02 {
	background-color: #dae9ff;
	width: 50%;
	padding: 10px;
}

/*背景（薄い黄色）*/
.bg_cream {
	background-color: #FFFFCB;
	padding: 10px;
}

.bottom_space {
  margin-bottom: 1em;
}

.bottom_space2 {
  margin-bottom: 3em;
}

.top_speace {
	margin-top: 3em;
}

.font14 {
    font-size: 14px !important;
}

.font20 {
    font-size: 20px !important;
}

.font30 {
    font-size: 30px !important;
}

/* ----------------------------------------------------
 
    float
 
---------------------------------------------------- */
.fr {
	float: right !important;
}
.fl {
	float: left !important;
}
.clear {
	clear: both;
}
img {
	line-height: 0;
	padding: 0;
	margin: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
/* ----------------------------------------------------
    clearfix の代用
    <div class="hr"><hr /></div>
---------------------------------------------------- */



/* ----------------------------------------------------
 
    テキストボックス
 
---------------------------------------------------- */

.text900 {
	width: 900px;
	margin: 0 auto;
	padding: 1rem 0;
}

.text810 {
	width: 810px;
	margin: 0 auto;
	padding: 1rem;
}


.text810_2 {
	width: 810px;
	margin: 1rem auto;
	padding: 1rem;
	background-color: #FFEEEE;
}


@media screen and (max-width: 640px) {
.text900 {
	width: 95%;
	padding: 1rem 0;
	box-sizing: border-box;
}

.text810 {
	width: 95%;
	padding: 1rem 0;
	box-sizing: border-box;
}


.text810_2 {
	width: 95%;
	margin: 1rem auto;
	padding: 1rem auto;
	background-color: #FFEEEE;
	box-sizing: border-box;
}
}



/* ----------------------------------------------------
 
    ボックス
 
---------------------------------------------------- */

.box900 {
	width: 900px;
	margin: 0 auto;
	padding: 1rem;
	background-color: #fff;
}

.box900_2 {
	width: 900px;
	margin: 2rem auto;
	padding: 1rem;
	background-color: #fff;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.box900_c {
	width: 900px;
	margin: 0 auto;
	padding: 2rem;
	background-color: #FFFFE2;
}

.box900_g {
	width: 900px;
	margin: 0 auto;
	padding: 2rem;
	background-color: #F7F7F7;
}


@media screen and (max-width: 640px) {
.box900 {
	width: 95%;
	margin: 1rem auto;
	padding: 1rem 0.5rem;
	background-color: #fff;
	box-sizing: border-box;
}

.box900_2 {
	width: 95%;
	margin: 1rem auto;
	padding: 0.5rem auto;
	background-color: #fff;
	border: none;
	box-sizing: border-box;
}

.box900_c {
	width: 95%;
	margin: 0 auto;
	padding: 1rem 0 1rem 0.5rem;
	background-color: #FFFFE2;
	box-sizing: border-box;
}

.box900_g {
	width: 95%;
	margin: 0 auto;
	padding: 1rem 0.5rem 1rem 0.5rem;
	background-color: #F7F7F7;
	box-sizing: border-box;
}
}


/* ファーストビュー */
.fv {
	background-image: url("../images/fv_bg.jpg");
	background-repeat: repeat-x;
}

/* CTAエリア① */
.cta01 {
	background-image: url("../images/cta_bg.png");
	background-repeat: repeat;
	margin: 0 auto;
	padding: 3rem ;
}

@media screen and (max-width: 640px) {
.cta01 {
	width: 100%;
	background-color: #FFFFEA;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}
}

.btn_area01 {
    width: 900px;
    height: 556px;
    position: relative;
    margin: 0 auto;
}

.btn {
    position: absolute;
    bottom: 60px;
    left: 30px;
}


/* 光るボタン */
.shiny-btn{
	display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  transition: 0.2s;
}
.shiny-btn::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn 3s ease-in-out infinite;
}

@-webkit-keyframes shiny-btn {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


.support6 {
	background-color: #E7F0F6;
	margin: 0 auto;
	padding-bottom: 3rem;
}




.nayami {
	background-image: url("../images/nayami_bg.png") ;
	padding-bottom: 3rem;
}


.section01 {
	background-image: url("../images/section01_bg.png") ;
	padding: 2rem;
}

@media screen and (max-width: 640px) {
.section01 {
	padding: 1rem;
	margin: 0 auto;
	box-sizing: border-box;
}
}


.section02 {
	width: 900px;
	background-color: #fff;
	margin: 0 auto;
	padding: 1.5rem;
}

@media screen and (max-width: 640px) {
.section02 {
	width: 95%;
	padding: 0;
	margin: 0 auto;
	box-sizing: border-box;
}
}


.voice {
	background-color: #FFFFE2;
	margin: 0 auto;
	padding: 2rem;
}

.wrap_voice {
	width: 820px;
	margin: 20px auto;
}


/* 画像【左】　テキスト【右】 */
.customer_voice01 {
	width: 630px;
	float: right;
}

.customer_img01 {
	width: 160px;
	float :left;
}


/* テキスト【左】　画像【右】 */
.customer_voice02 {
	width: 630px;
	float: left;
}

.customer_img02 {
	width: 160px;
	float :right;
}

.voice ul {
	width: 810px;
	margin: 0 auto;
	padding: 1rem;
	background-color: #FFFFE2;
}


@media screen and (max-width: 640px) {
.voice {
	padding: 2rem 0;
	margin: 0 auto;
	box-sizing: border-box;
}

.wrap_voice {
	width: 95%;
	margin: 0px auto;
}
	
.wrap_voice img {
	margin: 1rem auto;
}


/* 画像【左】　テキスト【右】 */
.customer_voice01 {
	width: 100%;
	float: none;
	box-sizing: border-box;
}

.customer_img01 {
	width: 434px;
	float : none;
	margin: 10px auto;
	box-sizing: border-box;
}


/* テキスト【左】　画像【右】 */
.customer_voice02 {
	width: 100%;
	float: none;
	box-sizing: border-box;
}

.customer_img02 {
	width: 434px;
	float : none;
	margin: 10px;
	box-sizing: border-box;
}

.voice ul {
	width: 85%;
	margin: 0 auto;
	padding: 1rem;
	background-color: #FFFFE2;
}
}



.support6_2 {
	background-image: url("../images/support6_2_bg.jpg") ;
	padding: 2rem;
}


.wrap_support6_2 {
	width: 820px;
	margin: 20px auto;
}


/* 画像【左】　テキスト【右】 */
.support6_2_text {
	width: 530px;
	float: right;
}

.support6_2_img {
	width: 266px;
	float :left;
	margin-right: 20px;
}

@media screen and (max-width: 640px) {
.support6_2 {
	padding: 1rem;
}

.wrap_support6_2 {
	width: inherit;
	margin: 0px auto;
}


/* 画像【左】　テキスト【右】 */
.support6_2_text {
	width: inherit;
	float: none;
}

.support6_2_img {
	width: inherit;
	margin-right: 20px;
	text-align: center;
	float :none;
	box-sizing: border-box;
}
}



.merit {
	background-color: #FFFFE2;
	margin: 0 auto;
	padding: 2rem;
}

@media screen and (max-width: 640px) {
.merit {
	padding: 40px 0 30px 0;
	box-sizing: border-box;
}
}


.osusume {
	background-color: #fff;
	margin: 0 auto;
	padding: 1.5rem;
}

.list_01 {
    font-weight:bold;
    line-height: 1.8;
}

.list_01 ul {
    list-style: none outside;
    padding: 50px;
	
}

.list_01 li {
    background: url("../images/maru.png") no-repeat;
    background-position: 0px 5px 10px 5px;
    padding: 0px 15px 5px 38px;
}


.list_02 {
    font-weight:bold;
    line-height: 1.8;
}

.list_02 ul {
    list-style: none outside;
    padding: 50px;
	
}

.list_02 li {
    background: url("../images/batsu.png") no-repeat;
    background-position: 0px 5px 10px 5px;
    padding: 0px 40px 5px 38px;
}


@media screen and (max-width: 640px) {
.osusume {
	background-color: #fff;
	margin: 0 auto;
	padding: 40px 0 30px 0;
	box-sizing: border-box;
}

.list_01 {
    font-weight: bold;
    line-height: 1.8;
}

.list_01 ul {
    list-style: none outside;
    padding: 10px;
	
}

.list_01 li {
    background: url("../images/maru.png") no-repeat;
    background-position: 0px 5px 10px 5px;
    padding: 0px 20px 5px 38px;
}


.list_02 {
    font-weight:bold;
    line-height: 1.8;
}

.list_02 ul {
    list-style: none outside;
    padding: 10px;
	
}

.list_02 li {
    background: url("../images/batsu.png") no-repeat;
    background-position: 10px 8px 10px 5px;
    padding: 0px 20px 5px 38px;
}
}





.gentei {
	background-image: url("../images/support6_2_bg.jpg") ;
	padding: 2rem;
}

@media screen and (max-width: 640px) {
.gentei {
	padding: 40px 0 30px 0;
	box-sizing: border-box;
}
}


.kakaku {
	background-image: url("../images/kakaku_bg.png") ;
	padding: 3rem;
}


@media screen and (max-width: 640px) {
.kakaku {
	margin: 0 auto;
	padding: 40px 0 30px 0;
	box-sizing: border-box;
}
}




.profile {
	background-image: url("../images/profile_bg.jpg") ;
	margin: 0 auto;
	padding: 3rem;
}

.wrap_profile {
	width: 830px;
	margin: 0 auto;
}

.profile_img {
	width: 233px;
	float: left;
}

.profile_text {
	width: 570px;
	margin-left: 10px;
	float: right;
}


@media screen and (max-width: 640px) {
.profile {
	padding: 40px 0 30px 0;
	box-sizing: border-box;
}

.wrap_profile {
	width: 95%;
	margin: 0 auto;
}

.profile_img {
	width: 240px;
	margin: 0 auto; 
	box-sizing: border-box;
	float: none;
}

.profile_text {
	width: 95%;
	margin: 0 auto;
	box-sizing: border-box;
	float: none;
}	
}


.youtube {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow:hidden;
}

.youtube iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}


footer {
  width: 100%;
  height: 30px; 
  text-align: center;
  padding: 30px 0;
  background-color: #E4E2E2;
  font-size: 14px;
}

footer p {
	display: inline-block;
	padding-right: 10px;
}

footer a {
	text-decoration: none;
	color: #585757;
}

@media screen and (max-width: 640px) {
footer {
  width: 100%;
  height: 30px; 
  text-align: center;
  margin-top: 0;
}
}