@charset "utf-8";
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans CJK JP Regular'),
         url('css/fonts/NotoSansCJKjp-Regular.woff2') format('woff2'),
         url('css/fonts/NotoSansCJKjp-Regular.woff') format('woff'),
         url('css/fonts/NotoSansCJKjp-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans CJK JP Bold'),
         url('css/fonts/NotoSansCJKjp-Bold.woff2') format('woff2'),
         url('css/fonts/NotoSansCJKjp-Bold.woff') format('woff'),
         url('css/fonts/NotoSansCJKjp-Bold.ttf') format('truetype');
}


/*reset*/
/*******************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td,a,main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,img { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
table { border-collapse: collapse; border-spacing: 0;}
object,embed { vertical-align: top;}
hr,legend { display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: 700;}
img { width: auto; max-width: 100%; height: auto; border: 0; vertical-align: middle;}
li { list-style: none;}
a { color: #231815; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration: none;}
a:not(.pt):hover { opacity: 0.8;}
a img { -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
a:not(.pt) img:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}


/*LAYOUT*/
/*******************************************************************/
body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; height: 100%; background: #FFF; font-family: 'Noto Sans Japanese', sans-serif; font-size: 14px; line-height: 2; letter-spacing: 0.1em; font-weight: 400; word-break: break-all; color: #231815;}
#container { width: 100%;}


/*HEADER*/
/*******************************************************************/
#header { position: relative; height: 70vh; background: url(../images/bg.jpg) center center no-repeat; background-size: cover; overflow: hidden;}
#header h1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: auto; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;}
#bg { position: absolute; top: 0; left: 0; width: 100%; height: 70vh; text-align: center;}
.inline-YTPlayer { max-width: initial!important;}
.pattern { position: absolute; top: 0; left: 0; width: 100%; height:100%; background: url(../images/mask.png) repeat;}


/*CONTENTS*/
/*******************************************************************/
#main { position: relative;}
h2 { margin-bottom: 5%; text-align: center; font-size: 36px; color: #a50082;}
h3 { margin-bottom: 5%; font-size: 24px; color: #a50082;}
figure { margin-bottom: 5%; overflow: hidden;}
dt { clear: left; float: left; width: 25%; padding: 2% 0; font-weight: 700;}
dd { padding: 2% 0 2% 25%; border-bottom: 1px dashed #CCC;}

#service { padding: 5%; text-align: center; background: url(../images/service.jpg) center center repeat; color: #FFF;}
#service section { max-width: 1200px; margin: 0 auto;}
#service ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-content: center; align-content: center;}

#contents { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center;}
#contents section { -webkit-flex-basis: 50%; flex-basis: 50%; max-width: 50%;}
#company { padding: 30px 5%; -webkit-align-self: center; align-self: center;}
#kanri { text-align: center; background: #f0f2ef;}
#kanri p { padding: 0 5% 5%;}

#contact { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; padding: 4%; text-align: center; background: url(../images/contact.jpg) center center no-repeat; background-size: cover;}
.box { padding: 5%; background: rgba(255,255,255,.8);}
.box a { display: block; font-size: 30px; font-weight: 700; letter-spacing: 0;}

#form { padding: 30px 5%;}
#form dt { width: 180px;}
#form dd { padding-left: 200px;}
input[type="text"], input[type="tel"], input[type="email"], selsect, textarea { width: calc(80% - 10px); margin: 5px; padding: 5px; border: 1px solid #AAA; -webkit-appearance: none; appearance: none;}
textarea { height: 180px; line-height: 1.5;}
.btn a, button { display: inline-block; padding: 10px 50px; background: #a50082!important; border: none; border-radius: 6px; font-size: 18px; font-weight: 700; color: #FFF; cursor: pointer;}
#form section { max-width: 1200px; margin: 0 auto; text-align: center;}
#form p { padding-bottom: 5%;}


/*FOOTER*/
/*******************************************************************/
#footer { padding: 2%; background: #a50082; text-align: center; color: #FFF;}
#pagetop { display: none; position: fixed; right: 20px; bottom: 20px; z-index: 90;}
#footer address { font-size: 11px;}


@media only screen and (max-width: 1200px){
#form dt { clear: left; float: none; width: 100%; padding: 1% 0;}
#form dd  { padding: 0 0 1%;}
input[type="text"], input[type="tel"], input[type="email"], selsect, textarea { width: calc(100% - 10px);}
}


@media only screen and (max-width: 767px){
#header h1 { padding: 10%;}
#bg { display: none;}
dt { clear: left; float: none; width: 100%; padding: 1% 0;}
dd { padding: 0 0 1%;}
#service ul { display: block;}
#contents { display: block;}
#contents section { max-width: 100%;}
#pagetop { display: block!important; right: 10px; bottom: 10px;}
#pagetop a { display: block; padding: 0; border: none; font-size: 50px;}
}


@media print {
#container { width: 1060px;}
}