@charset "utf-8";

/*■■■■■■■■■■■■■■■■■■■■■■
　　共通設定
■■■■■■■■■■■■■■■■■■■■■■*/

/*------------------------------------------
■ ブラウザのマージンとパディング初期化
------------------------------------------*/
*{margin:0;padding:0;}

body,div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,table,tr,td { 
	font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
	padding: 0;
	margin: 0;
	line-height:180%;
	font-size:24px;
	color: #222222;
}

.sp-none{ display:none;}
.pc-none{ }
.clear { clear:both;}
/*------------------------------------------
■ イメージ初期化
------------------------------------------*/
img {vertical-align:middle;margin:0;padding:0; border:0;}

img.bottom{ margin-bottom:10px;}

/*------------------------------------------
■ リンク設定
------------------------------------------*/
a img{border: none;}

a:link {color:#28a1ad;text-decoration: underline;}
a:visited {color:#39757b;text-decoration: underline;}
a:active {color:#222222;text-decoration:none;}
a:hover {color:#222222;text-decoration:none;}

/*------------------------------------------
■ リンク画像のhover半透明化設定
------------------------------------------*/
a:hover img{
opacity:0.85;
/*--IE,FF対応--*/
filter:alpha(opacity=85);
-ms-filter: "alpha( opacity=85)";
}

h2 { font-size: 50px; font-weight: normal; margin: 0 auto 50px; padding: 0 0 10px; display: block; text-align: center;letter-spacing: 0.05em; background: url("images/h2_bar.png") no-repeat center bottom; background-size: 40px 4px;}

header { background: #ffffff; height: 150px; width: 640px; padding: 30px 0 0 0; text-align: right; border-bottom: solid 1px #eeeeee; position: fixed;}
header a.head_logo { background:url("images/logo.png"); background-size: 200px 200px; margin: 0px 0 0 0; float: left; display: block; width: 200px; height: 200px; text-indent:-5000px;position:absolute; top:0px; left:0px;}

header a:link {color:#222222;text-decoration: none;}
header a:visited {color:#222222;text-decoration: none;}
header a:active {color:#28a1ad;text-decoration:none;}
header a:hover {color:#28a1ad;text-decoration:underline;}

header a.txt_blue:link {color:#28a1ad;text-decoration: none;}
header a.txt_blue:visited {color:#28a1ad;text-decoration: none;}
header a.txt_blue:active {color:#28a1ad;text-decoration:none;}
header a.txt_blue:hover {color:#28a1ad;text-decoration:underline;}

header div{ padding: 45px 50px 0 0; font-size: 28px;}

div.top_space { clear:both; height: 180px;}
div.mv {background:url(images/mv.png) center; background-size: 1600px 500px; width: 640px; height: 500px; padding: 0; margin: 0 0; clear: both; display: block;}

div.contents { width: 640px; min-width: 640px; padding: 50px 0; text-align: center;}
div.contents_txt { width: 580px ; margin: 0 auto; padding: 0 30px; display: block; text-align: left;}
div.contents_txt ul { margin: 0 0 0 20px;}


ul.icon { width: 580px; margin: 50px auto 80px; display: block; clear: both;}
ul.icon li { list-style: none; float: left; text-align: center; width: 220px; margin: 30px 20px 0; line-height: 140%;}
ul.icon li img { width:220px; margin: 0 auto 10px; display: block;}

div.price {background:url(images/bg_price.png) ; width: 640px; clear: both; margin: 0; padding: 50px 0 50px; text-align: center;  
background-attachment: fixed;
background-size: cover;
background-position: center;}

ul.price { width:580px; margin: 50px auto 10px; display: block;}
ul.price li { background:#ffffff; list-style: none; margin: 2px 0 2px; padding: 15px 20px; width: 540px;
	opacity: .9;
-webkit-opacity: .9;
-moz-opacity: .9;
filter: alpha(opacity=90);	/* IE lt 8 */
-ms-filter: "alpha(opacity=90)"; /* IE 8 */}

ul.price li p.price_tit { clear: both; width: 540px; text-align: left;}
ul.price li p.price_yen { text-align:right; width:540px;}

ul.works {width:580px; margin: 50px auto 10px; display: block;}
ul.works li { float: left; margin: 0 20px 30px; list-style: none;}
ul.works li img { width: 250px;}

div.contact { background:#eef7f8; width: 100%; padding: 50px 0; text-align: center;}
table.contact_form { width: 90%;}
table.contact_form th { padding:10px 15px; font-weight: normal; text-align: left; background: #ffffff; }
table.contact_form td { padding:10px 15px; text-align: left; background: #ffffff;}

@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 95%;
  }
table.contact_form {
    width: 90%;
  }
table.contact_form th,
table.contact_form td {
　　border-bottom: none;
    display: block;
    width: 95%;
  }
}
/* フォームメール CSS */

div#sfm-container { width: 600px; margin: auto; padding: 5px; border: 1px solid #ccc; }
div#sfm-container h1 { font-size: 14px; color: #fff; background: #99c; padding: 2px 2px 1px 5px; border-left: 6px solid #55a; margin: 0px; }
div#sfm-container h2 { font-size: 14px; margin: 0px; padding: 10px 0px; }


div#sfm-layout .submit { text-align: center; background: #fff; width: auto; border-left: none; }
div#sfm-layout .submit input { width: 70px; }
div#sfm-layout .type-red { color: red; }
div#sfm-layout .ERR { color: red; }

input{margin:2px;}
select{margin:2px;}
textarea{ margin:2px; width:400px;}

#name, #name2, #name3, #name4, #kana, #kana3, #kana4, #yearold, #info01,#friend,#keyword,#other { width: 400px; margin:2px 0px 0px 0px; border: solid 1px #eeeeee;}
#email, #emailcheck,#email2cd { width: 400px; border: solid 1px #eeeeee;}
#address { width: 520px; border: solid 1px #eeeeee;}
#address0 { margin-bottom: 3px; border: solid 1px #eeeeee;}
#yearold2, #yearold3, #count, #count2 { width: 30px; border: solid 1px #eeeeee;}
#zip { width: 100px; border: solid 1px #eeeeee;}
#tel, #tel1, #tel2, #fax0, #fax1, #fax2, #mob0, #mob1, #mob2 { width: 200px; border: solid 1px #eeeeee;}
#message,#message2 { width: 520px; height: 150px; border: solid 1px #eeeeee;}

#submit_btn {
    padding: 20px 100px;
    font-size: 24px;
    background-color: #28a1ad;
    color: #fff;
    border-style: none;
}

#reset_btn {
    padding: 20px 50px;
    font-size: 24px;
    background-color: #999999;
    color: #fff;
    border-style: none;
}

footer { background:#28a1ad; padding: 0; width: 100%; height: 120px; min-width: 640px;}
footer p.foot_link { text-align: center; padding: 12px 15px 0; color: #ffffff;}
footer p.foot_link a:link {color:#ffffff;text-decoration: none;}
footer p.foot_link a:visited {color:#ffffff;text-decoration: none;}
footer p.foot_link a:active {color:#ffffff;text-decoration:none;}
footer p.foot_link a:hover {color:#ffffff;text-decoration:underline;}
footer p.copyright { text-align: center; padding: 0px 15px 8px; color: #ffffff;}



table.nomal_table { width: 95%; margin: 20px 0; display: block;}
table.nomal_table th { padding:10px 14px; font-weight: normal; text-align: left; background: #eef7f8; }
table.nomal_table td { padding:10px 14px; text-align: left; background: #ffffff;}

table.nomal_table td ul { margin: 0 0 0 20px;}

@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
table.nomal_table {
    width: 95%; margin: 20px 0; block;
  }
table.nomal_tableth,
table.nomal_tabletd {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

/*------------------------------------------
■ MENU
------------------------------------------*/
/* MENU */
.hamburger-menu-wrapper{
    margin-top: 0px;
	width: 160px;
    padding: 20px;
    display: inline-block;
}
.hamburger-menu-wrapper.bounce-effect{
    animation: bounce 0.3s ease 1;
}
.menu-overlay {
    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1111;
}
.menu{
    position: relative;
    min-width: 600px;
    text-align: right;
}
.hamburger-menu {
    border: 0;
    margin: 0 auto;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 100px;
    height: 100px;
    font-size: 0;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 9999;
    cursor: pointer;
    background: transparent;
}
.menu-list{
    display: none;
    position: absolute;
    top: calc(100% + 0px);
    width: 70%;
    text-align: center;
    z-index: 9999;
	right: 0;
	margin: 180px 0 0;
	position: fixed; top:0px;
}
.menu-list a{
    color: #222222;
    text-decoration: none;
    font-size: 24px;
    display: inline-block;
    margin: 0px 0;
    transition: all 0.5s ease;
	background: #f2f6f6;
	padding: 25px 0;
	width: 100%;
	opacity:0.80;
	border-bottom: #cccccc solid 2px;
}
.menu-list a:hover{
    color: #28a1ad;
}
.hamburger-menu:focus {
    outline: none;
}
.hamburger-menu span {
    display: block;
    position: absolute;
    top: 35px;
    left: 5px;
    right: 5px;
    height: 6px;
    background: #28a1ad;
}

.hamburger-menu span:before,
.hamburger-menu span:after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: #28a1ad;
    content: "";
}

.hamburger-menu span:before {
    top: -30px;
}

.hamburger-menu span:after {
    bottom: -30px;
}

.hamburger-menu span:before,
.hamburger-menu span:after {
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0.3s, 0s;
}

.hamburger-menu span:before {
    transition-property: top, transform;
}

.hamburger-menu span::after {
    transition-property: bottom, transform;
}


.hamburger-menu.active span {
    background: none;
}
.hamburger-menu.active span:before {
    top: 0;
    transform: rotate(225deg);
}

.hamburger-menu.active span:after {
    bottom: 0;
    transform: rotate(135deg);
}

.hamburger-menu.active span:before,
.hamburger-menu.active span:after {
    transition-delay: 0s, 0.3s;
}


@keyframes bounce {
    0%{
        transform: rotate(0);
    }
    45%{
        transform: rotate(15deg);
    }
    90%{
        transform: rotate(-7deg);
    }
    100%{
        transform: rotate(0);
    }
}