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

/*!----------------
共有スタイル
-----------------*/

/*!Style
-------------------------------------*/
*{box-sizing:border-box}
html{font-size: 16px;color:#000;scroll-behavior: smooth;position: relative;}
body{margin:0;padding:0;font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}
img{vertical-align:bottom;}
a{text-decoration:none;color:#000;}
a:hover{text-decoration:none;color:#666;}
a:hover img{opacity:0.7;filter:alpha(opacity=70);-ms-filter:"alpha(opacity=70)"}
ul,li{list-style: none;}

/*!大枠
-------------------------------------*/
#stage{margin:0 auto;padding:0;width:100%;text-align:center;min-height: 100vh;}

/*!ヘッダー
-------------------------------------*/
header{margin:0 auto;padding:0;background: #ffe556;}
header h1{margin: 0;padding: 1em;font-size: 30px;letter-spacing: 2px;}

@media (max-width:799px){
header h1{padding: 0.5em;}
}

/*!グローバルナビ
-------------------------------------*/
nav{}
nav ul{margin:0 auto;padding:0;display: flex;justify-content: center;}
nav ul li a{display: block;padding:1em 3em;font-weight: bold;font-size: 0.9em;letter-spacing: 2px;}
nav ul li a span{display: block;font-weight: 100;font-size: 0.6em;}

@media (max-width:799px){
nav ul{flex-flow: row wrap;}
nav ul li{width:50%;}
nav ul li a{padding:0.5em;width:100%;}  
}

/*!mv
-------------------------------------*/
#mv{margin: 0 auto;max-width:1200px;width:100%;position: relative;}
#mv h2{font-size: 2.4em;text-align: left;position: absolute;top: 50%;left: 0%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);letter-spacing: 2px;}
#mv h2 span{display: block;font-size: 0.5em;font-weight: 100;}
#mv h2 p{font-size: 0.5em;font-weight: 100;}
#mv img{width:100%;}


@media (max-width:799px){
#mv h2{top: 35%;padding: 0.5em;font-size: 1.8em;}
}

/*!NEWS
-------------------------------------*/
#news{margin: 0;padding: 5em 0 7em;text-align: center;}
#news h3{letter-spacing: 5px;font-size: 1.8em;}
#news ul{margin: 0 auto;max-width:1200px;width:90%;border: 5px solid #000;border-radius: 50px;padding: 2em 3em;text-align: left;}
#news ul li{padding: 1em;border-bottom: 1px solid;letter-spacing: 2px;}
#news ul li:last-child{border:none;}

@media (max-width:1199px){
#news ul{padding: 1em 2em;}
}

/*!事業内容
-------------------------------------*/
#business{margin: 0;padding: 5em 0 7em;text-align: center;}
#business h3{letter-spacing: 5px;font-size: 1.8em;position: relative;display: inline-block;}
#business span{display: block;font-size: 0.5em;font-weight: 100;}
#business h3:before {content: '';position: absolute;left: 50%;bottom: -50px;display: inline-block;width: 100px;height: 5px;-webkit-transform: translateX(-50%);transform: translateX(-50%);background-color: #000;}

#business h4{margin: 5em auto 1em;width: fit-content;font-size: 1.6em;background: linear-gradient(transparent 60%, #ffe556 0%);}
#business p{letter-spacing: 2px;line-height: 2em;}

#business ul{margin: 1em auto;padding: 0;text-align: left;width: 800px;display: flex;}
#business ul li:first-child{padding:1em;background: #eee;display: flex;align-items: center;justify-content: center;width: 200px;}
#business ul li:last-child{padding:1em;background: #fff;width: 600px;}
#business ul#bnews{border: 3px solid #333;border-radius: 30px;display: block;margin: 0;width: auto;}
#business ul#bnews li{padding:1em;}
#business ul#bnews li:first-child{padding:1em;background: none;display: block;width: auto;border-bottom:1px dashed #ccc;}
#business ul#bnews li:last-child{padding:1em;background: none;display: block;width: auto;border-top:1px dashed #ccc;}

#business p.title{margin: 1em 2em 0;background: #333;width: fit-content;padding: 0.1em 1em 0;color: #fff;}



@media (max-width:1199px){
#business{margin: 0 auto;padding: 0 0 6em;width:90%;}
#business h4{margin: 3em auto 1em;}
#business p{text-align: left;}
#business ul{display: block;width:100%;}
#business ul li:first-child{width:100%;}
#business ul li:last-child{width:100%;}
}

/*!会社概要
-------------------------------------*/
#company{margin: 0;padding: 5em 0 7em;text-align: center;}
#company h3{letter-spacing: 5px;font-size: 1.8em;position: relative;display: inline-block;}
#company span{display: block;font-size: 0.5em;font-weight: 100;}
#company h3:before {content: '';position: absolute;left: 50%;bottom: -50px;display: inline-block;width: 100px;height: 5px;-webkit-transform: translateX(-50%);transform: translateX(-50%);background-color: #000;}

#company ul{margin: 5em auto 0;padding: 0;text-align: left;width: 800px;display: flex;flex-flow: row wrap;}
#company ul li:nth-child(odd){margin: 0 0 1em;padding:1em;background: #eee;display: flex;align-items: center;justify-content: center;width: 200px;}
#company ul li:nth-child(even){margin: 0 0 1em;padding:1em;background: #fff;width: 600px;}

/*map*/
iframe{width:100%;max-width: 800px;height:400px;}

@media (max-width:1199px){
#company{margin: 0 auto;padding:0 0 6em;width:90%;}
#company ul{display: block;width:100%;}
#company ul li:nth-child(odd){width:100%;}
#company ul li:nth-child(even){width:100%;}
/*map*/
iframe{height:300px;}
}

/*!お問い合わせ
-------------------------------------*/
#contact{margin: 0;padding: 5em 0 7em;text-align: center;background: #eee;}
#contact h3{margin: 0 0 3em;letter-spacing: 5px;font-size: 1.8em;position: relative;display: inline-block;}
#contact span{display: block;font-size: 0.5em;font-weight: 100;}
#contact h3:before {content: '';position: absolute;left: 50%;bottom: -50px;display: inline-block;width: 100px;height: 5px;-webkit-transform: translateX(-50%);transform: translateX(-50%);background-color: #000;}
#contact input[type="submit"],#contact input[type="reset"]{border: 1px solid #000;color:#000;padding: 1em 2em 1.2em;letter-spacing: 3px;background: none;}
#contact table{margin: 3em auto;max-width: 800px;width: 100%;}
#contact input[type="text"],#contact textarea{width:100%;padding: 0.5em;}
#contact th,td{padding: 1em 0;}

@media (max-width:1199px){
#contact{margin: 0;padding: 5em 1em;text-align: center;background: #eee;}
#contact th,td{padding: 0;width: 100%;display: block;}
#contact textarea{height:200px;}
#contact input[type="text"],#contact textarea{padding: 1em;}
}

/*!footer
-------------------------------------*/
footer{margin:0 auto;padding:1em;text-align: center;background: #ffe556;}
footer#mailform_f{position: absolute;bottom: 0;width: 100%;}

@media (max-width:1199px){
footer{font-size: 0.9em}
}

/*!完了画面など
-------------------------------------*/
#mailform{margin-top: 5em;letter-spacing: 2px;}
#mailform input[type="button"]{border: 1px solid;padding: 1em 2em 1.2em;letter-spacing: 3px;background: #fff;}

#formWrap{margin: 5em 0;}
#formWrap table{margin: 3em auto;max-width: 800px;width: 100%;}
#formWrap th,td{padding: 1em 0;}
#formWrap input[type="button"],#formWrap input[type="submit"]{color:#000;border: 1px solid #000;padding: 1em 2em 1.2em;letter-spacing: 3px;background: #fff;}
#formWrap table{margin: 3em auto;max-width: 800px;width: 100%;}
#formWrap th{background: #eee;}
#formWrap th{padding: 1em 0;width: 200px;}
#formWrap td{padding: 1em;width: 600px;text-align: left;}
#mailform a{margin: 2em auto;padding: 1em 2em;display: block;border: 1px solid;width: fit-content;}

@media (max-width:1199px){
#mailform{margin-top: 5em;padding:0 1em;letter-spacing: 2px;}
#formWrap{margin: 5em auto;padding:0 1em;}
#formWrap th,td{padding: 0;width: 100%;display: block;}
#formWrap table {table-layout: fixed;word-break: break-all;word-wrap: break-word;}
#formWrap input[type="button"],#formWrap input[type="submit"]{padding: 1em 1em 1.2em;}
}

/*!アニメーション
-------------------------------------*/
.slide-in {opacity: 0;}
.slide{animation: anime 1s forwards;opacity: 0;}
/*下から上*/
@keyframes anime{
  0% {transform: translateY(50px);}
  100% {transform: translateY(0);opacity: 1;}
}