/*
Author: TN
*/

@charset "UTF-8";
/*------------------------------------------------------------
	base
------------------------------------------------------------ */
* { box-sizing:border-box; }
html { font-size: 10px; webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { margin: 0; padding: 0; font: 15px/1.4 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Yu Gothic", YuGothic, "游ゴシック体", "Helvetica", "Lucida Grande", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Geneva", "Arial", "Verdana", sans-serif; height: 100%; background-color:#fff; color:#111;}
h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,form,figure{ margin: 0px; padding: 0px; }
ul { list-style-type: none; }
img { border: none; }
input,textarea,select { font-size: 1em; }
form { margin: 0px; }
table {	border-collapse:collapse; font-size: 100%; border-spacing: 0; width: 100%;}
/*link*/
a { border:0; text-decoration:none; color: inherit; transition: all .2s ease-in-out; }
a:hover { text-decoration: none; color:inherit; }
.linkText { color:#09c; padding-top:5px; text-decoration:underline; line-height:2.2; }
.linkText:hover { color:#09c; }
/*text*/
h1, h2, h3, h4, h5, h6 { text-align: left; line-height:1.6; line-break: strict; font-weight: bold; }
h1 { font-size: 2vw; }
h2 { font-size: 3vw; }
h3 { font-size: 20px; }
h4 { font-size: 20px; }
h5 { font-size: 20px; }
h6 { font-size: 20px; }
p { font-weight: normal; font-size: 16px; line-height: 1.7;}

/*strong*/
strong { font-weight: bold; }
em, i { font-style: italic; }

/* IMG */
img { display:block; margin:0 auto; padding:0; border: 0; max-width:100%; }
img.center { display:block; margin:0 auto; }
img.left { float: left; margin: 0 15px 0 0; border: 0; }
img.right { float: right; margin: 0 0 0 15px; border: 0; }
a img { transition: all .2s ease-in-out; }
a:hover img { opacity:.7; }

/* LIST */
ul { margin-bottom: 0; list-style: none outside; }
ol { margin-bottom: 0; list-style: decimal; margin-left: 2.2em; }

/* HR */
hr { border-width: 1px 0 0 0; border-style: solid; border-color: #bdbdbd; height: 1px; margin: 1.5em 0;}

@media(max-width:767px) {
    h1 { font-size: 2vw; }
    h2 { font-size: 5.4vw; }
    h3 { font-size: 4.8vw; }
    h4 { font-size: 4.4vw; }
    h5 { font-size: 4vw; }
    h6 { font-size: 3.6vw; }
    p { font-size: 1.4rem; }
}
@media(max-width:320px) {
    p { font-size: 1.3rem; }
}


/*------------------------------------------------------------
	header - nav
------------------------------------------------------------ */
header { position: fixed; width:100%; padding:0; top:0; z-index: 9999;}
.inner { width:88%; max-height:150px; margin: 0 auto; padding:1% 3.5%; display:flex; align-items:center; background: #fff; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; box-shadow: 0 4px 8px #bbb;}
header h1 { position: relative; line-height:1; font-size:1em; text-align: center; display: flex; align-items: center; width: 24vw; max-width: 342px; }
header h1 a { display:block;}
header img { width: 100%; margin: 0;}

#mobile-head { margin: 0 auto 0 0;}
header nav ul { display:flex; }
header nav li { margin-right:2em; min-height:100px; display: flex; align-items: center; text-decoration:none; font-size:1vw;}
header nav > ul > li > span,
header nav > ul > li > a, header p { position:relative; display:block; text-decoration:none; font-size:1.2vw; text-align:left; line-height:1; font-weight: bold;}

header nav { display: flex; align-items: center;}
header nav > div h6 { font-size: 1.8vw;}
header nav > div h6 span { font-size: 1.2vw; display: inline-block; margin-right: .3em;}

@media(min-width:1300px) {
    .inner { padding:3% 3.5%; }
    header nav > ul > li > a, header p { font-size:16px;}
    header nav > div h6 { font-size: 24px;}
    header nav > div h6 span { font-size: 16px;}
}

/*hover*/
nav a:before, nav a:after, nav a.on:before, nav a.on:after{
  position: absolute;
  bottom: -.3em;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;
  background: #555;
  transition:all .25s ease;
}
nav a:before, nav a.on:before{ display:none; }
nav a:after, nav a.on:after{ right: 0%; }
nav a.on:after, nav a:hover:after{ width:100%; }
nav a.mail:hover:after{ width:0; }

/* Toggle Button */
#nav-toggle { display: none; position: relative; right: 0; top: 0; width: 35px; height: 35px; cursor: pointer; z-index: 999; margin-left: auto;}
#nav-toggle div { position: relative; width:100%; margin:6px auto; }
#nav-toggle span { display: block; position: absolute; height: 3px; width: 100%; background: #333; left: 0; transition: .35s ease-in-out; border-radius: 20px; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 12px; }
#nav-toggle span:nth-child(3) { top: 23px; }
@media(max-width:767px) {
    header { position:fixed; top:0; left:0; }
    .inner { width:95%; margin:0 auto; height: 80px; padding: 0 4%;}
    header h1 { width: 65%;}
    header h1 a  { display: block;}
    header img { width: 100%; max-width: 100%;}
    #mobile-head { width: 92%; margin:0 auto; padding:0; position: relative; display: flex; align-items: center;}
    header .inner > div { display: none;}
    header nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top:0;
    left:-100vw;
    background:#808080;
    width: 100%;
    height:100vh;
    text-align: center;
    padding:0;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    z-index: 998;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    }
    header nav ul {
    list-style: none;
    position: static;
    right: 0;
    bottom: 0;
    font-size: 14px;
    align-items: flex-start;
    width:100%;
    }
    header nav > ul {
    width: 100%;
    padding:20vh 0 0;
    margin-left: auto;
    }

    header nav ul li,
    header.fixed nav li {
    position: relative;
    padding:0;
    min-height:auto;
    font-size:1.7rem;
    display:block;
    width:100%;
    text-align: center;
    }
    header nav ul li a {
    width: auto;
    display: inline-block;
    padding: .8em 1em;
    font-size:1.7rem;
    text-align: center;
    color: #fff;
    }

    #nav-toggle {
    display: block;
    }

    header nav > div { margin-top: 15%;}
    header nav > div img { width: 80%; margin: 0 auto 8%;}
    header nav > div h6 { font-size: 7vw;}
    header nav > div h6 span { font-size: 4.6vw; display: inline-block; margin-right: .3em;}
    nav > div p { font-size: 4.6vw;}
    header nav > div h6, header nav > div p { text-align: center; color: #fff;}

    /* #nav-toggle 切り替えアニメーション */
    header.open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
    background: #fff;
    }
    header.open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
    }
    header.open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
    background: #fff;
    }
    /* nav スライドアニメーション */
    header.open nav {
    /* nav top + #mobile-head height */
    -moz-transform: translateX(100vw);
    -webkit-transform: translateX(100vw);
    transform: translateX(calc(100vw));
    }

    header nav ul { flex-direction:column;}
    header nav li { margin-left:0;}
    header nav a:before, header nav a:after, header nav a.on:before, header nav a.on:after { display:none; }

    header nav > ul > li > span,
    header nav ul li.drop li a { padding:0; width:100%; margin:0 auto .8em; line-height: 1;}
    header nav > ul > li > span { padding: .8em 0 0 1em;}
}
@media(max-width:320px) {
    nav ul li { padding-top:.6em; }
    header nav ul li a, header.fixed nav ul li a { padding: 1em 0 0; font-size:1.6rem; }
}


/*------------------------------------------------------------
	BUTTON
------------------------------------------------------------ */
button, [type="button"], [type="reset"], [type="submit"] { background:none; border:0; }
.btns { text-align: center; background: rgba(255, 255, 255, .6);box-shadow: 0 4px 8px #bbb; margin-top: 4%; padding: 1em; border-radius: 20px;}
.btns a { text-align:center; line-height: 1; display:inline-block; background: none; font-size: 16px; font-weight: bold;}
.btns a:hover { opacity: .7;}

@media(max-width:767px) {
    .btns { margin-top: 8%;}
    .btns a { font-size: 4vw;}
}


/*------------------------------------------------------------
	COMMON
------------------------------------------------------------ */
body { background: url(images/bg.jpg) 50% 8% repeat-y; background-size: 100%;}
main { display: block;
background-image: url(images/footer_img01.png),url(images/footer_img02.png);
background-position: 16% 100%,92% 100%;
background-repeat: no-repeat;
background-size: 11%, 25%;
}
section { position:relative; width:100%; margin:8% auto 0; padding:0; box-sizing: border-box; }
.ins { width:1200px; max-width:80%; margin:0 auto; }
section > .ins:not(:first-of-type) { margin-top: 6%;}
.ins.min { width:70%; }
dl { display: flex; align-items: flex-start; justify-content: space-between;}
dt, dd { width: 48%;}
h2 { margin-bottom: 1em;}
h3 { color: #58bbf6; margin-bottom: .8em;}

@media(max-width:767px) {
    main {
    background-image: url(images/footer_img_sp.png);
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: 86%;
    }
    section { margin-top: 15%;}
    .ins { width:86%; max-width: 86%; margin:0 auto; }
    .ins.min { width:86%; }
    .ins img { max-width:100%; }
    section > .ins:not(:first-of-type) { margin-top: 10%;}
    dl { flex-direction: column;}
    dt, dd { width: 100%;}
    dd { margin-top: 8%;}
}
@media(max-width:320px) {
    .ins.min { width:90%; }
}



/*------------------------------------------------------------
	CONTENTS
------------------------------------------------------------ */
/* MAIN */
#main { width: 90%; margin: 0 auto;}
#main img { margin: 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
@media(max-width:767px) {
    #main { width: 100%; margin: 0 auto;}
    #main img { margin: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
}


/* WORKS */
#works h2 { width: 90%; max-width: 486px;}
#works .ins:first-of-type dt { width: 55%;}
#works .ins:first-of-type dd { width: 40%;}
#works .ins:nth-of-type(2) dl { align-items: stretch;}
#works .ins:nth-of-type(2) dt, #works .ins:nth-of-type(2) dd { border: 3px dashed #58bbf6; padding: 2.5em 3em; border-radius: 20px;}
@media(max-width:767px) {
    #works h2 { margin: 0 auto 1em; }
    #works .ins:first-of-type dt,
    #works .ins:first-of-type dd { width: 100%;}
    #works .ins:nth-of-type(2) dl { align-items: flex-start;;}
    #works .ins:nth-of-type(2) dt, #works .ins:nth-of-type(2) dd { padding: 1.5em 2em; border-radius: 14px;}
}


/* PORTFOLIO */
#portfolio h2 { width: 50%; max-width: 675px;}
#portfolio p { font-size: 20px; text-align: center; margin-top: .6em;}
#portfolio .btns a { background: url(images/icon_link.svg) 0 50% no-repeat; background-size: 45px; padding: 14px 0 10px 50px;}
@media(max-width:767px) {
    #portfolio h2 { width: 90%; margin: 0 auto 1em;}
    #portfolio p { font-size: 20px; text-align: center; margin-top: .6em;}
    #portfolio .btns a { background-size: 34px; padding: 14px 0 10px 40px;}
}


/* PAINTING */
#painting h2 { width: 100%; max-width: 496px;}
#painting dl:last-of-type { margin-top: 6%; align-items: center;}
#painting dt { width: 40%;}
#painting dd { width: 55%;}
@media(max-width:767px) {
    #painting h2 { width: 90%; margin: 0 auto 1em;}
    #painting dl:last-of-type { margin-top: 10%; align-items: center;}
    #painting dt,
    #painting dd { width: 100%;}
    #painting dd { margin-top: 6%;}
}


/* COMPANY */
#company { padding-bottom: 8%;}
#company h2 { width: 45%; max-width: 496px; margin: 0 auto 1em;}
#company p { text-align: center;}
#company table { width: auto; margin: 5% auto 0; vertical-align: top;}
#company tbody { vertical-align: top;}
#company table th, #company table td { padding: .6em 0; line-height: 1.8;}
#company table th { font-weight: bold; text-align: right;}
#company table td { padding-left: 5em;}
#company dl { justify-content: flex-start;}
#company dt, #company dd { width: auto; line-height: 1.8;}
#company dd { padding-left: 1em;}
#company dl:not(:first-of-type) { padding-top: 1em;}
@media(max-width:767px) {
    #company { padding-bottom: 45vh;}
    #company h2 { width: 90%; margin: 0 auto 1em;}
    #company table { margin: 10% auto 0; font-size: 1.4rem;}
    #company table td { padding-left: 1.5em;}
    #company dl { flex-direction: row;}
    #company dd { padding-left: 1em; margin: 0;}
}
@media(max-width:321px) {
    #company table { font-size: 3.8vw;}
}



/*------------------------------------------------------------
	footer
------------------------------------------------------------ */
footer { position:relative; margin:0; padding:1.4% 0; background:#d2e1f4;}
footer .ins { display: flex; align-items: center; justify-content: space-between;}
footer .ins img { width: 30%; max-width: 250px; margin: 0;}

.pagetop a { position:fixed; right:2%; bottom:4%!important; background: rgba(104,159,215,.8); padding:0; z-index:9900; border-radius: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff;}
.pagetop a i { margin-top: -.2em;}
.pagetop a:hover { height: 50px; color: #fff; background: rgba(104,159,215,1);}

@media(max-width:767px) {
    footer { padding:6% 0;}
    footer .ins { flex-direction: column; justify-content: center;}
    footer .ins img { width: 80%; margin: 0 auto .4em;}
}



/*------------------------------------------------------------
	others
------------------------------------------------------------ */
@media(min-width:768px) {
	.onlySp { display:none !important; }
}
@media(max-width:767px) {
	.onlyPc { display:none !important; }
}
@media(max-width:411px) {
	.small-container { padding-bottom: 172%; /* 高さ */ }
}
@media (min-width: 751px) {
    a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
    }
}