@charset 'UTF-8';
@import url("reset.css");
@import url("base.css");

/*====================================================
------------------------------------------------------
    main.css
------------------------------------------------------
====================================================*/
@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 400;
    src: url('/common/webfonts/notosans_regular.woff') format('woff'),
        url('/common/webfonts/notosans_regular.eot')  format('eot');
    font-display: swap;
}
@font-face {
    font-family: 'noto';
    font-style:bold;
    font-weight: 700;
    src: url('/common/webfonts/notosans_bold.woff') format('woff'),
        url('/common/webfonts/notosans_bold.eot')  format('eot');
    font-display: swap;
}


html { font-family: "noto", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;}
html { background: #caedfe;}

body { font-size: 1.6rem; line-height: 1.8; font-weight: 400;
background: url(../images/body_bg.jpg) 50% 0 no-repeat;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}

body.no_scroll { position :fixed;}

@media screen and (max-width: 767px) {

}



.inner { max-width: 1000px; min-width: 768px; margin: 0 auto;}

@media screen and (max-width: 767px) {
.inner { display: block; max-width: 100%; min-width: 100%; padding: 0 15px;}
}



/* header -----------------------------------------*/

header { width: 100%; height: 100px; background: rgba(255, 255, 255, 0.8); z-index: 9999;}

header .inner { display: flex; height: 100px; align-items: center;}

header .logo { margin-right: 30px;}
header .logo a { display: block; padding: 0; margin: 0;}
header .logo img { width: 169px; height: 39px;}
header .logo:hover { opacity: .7; transition: .5s;}
header nav { flex-grow: 3;}
header .tellArea { width: 220px; display: flex; align-items: center; color: #fff; background: #e60012; border-radius: 5px; line-height: 1.2; padding: 5px;}

header .tellArea dd { padding: 0 5px; font-size: 1rem;}
header .tellArea dd a { font-size: 3rem; color: #fff; font-weight: 700; pointer-events: none;}


/* gNav -----------------------------------------*/

nav .gNav { width: 100%; display: flex; align-items: center; margin: 0;}
nav .gNav li { padding: 0 15px; position: relative;}
nav .gNav li:last-of-type { margin-right: 0;}
nav .gNav li a { }
nav .gNav li a:hover,
#top nav .gNav li.top a, #top nav .gNav li.top a:hover,
#handyman nav .gNav li.handyman a, #handyman nav .gNav li.handyman a:hover,
#architecture nav .gNav li.architecture a, #architecture nav .gNav li.architecture a:hover,
#contact nav .gNav li.contact a, #contact nav .gNav li.contact a:hover { border-bottom: 3px solid #0768ac;}

header .toggle { display: none;}

@media screen and (max-width: 1000px) and (min-width: 916px){
header .inner { padding: 0 15px;}
}

@media screen and (max-width: 915px) and (min-width: 768px){
header { width: 100%; height: 120px; padding-top: 10px;}
header .inner { flex-wrap: wrap; padding: 0 15px;}
header .tellArea { width: 100%; background: rgba(230, 0, 18, 0.8); text-align: center; order: 1; flex-grow: 3;}
header .tellArea dd { width: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;}
header .tellArea dd a { padding: 0 15px; text-decoration: none;}
header .logo { order: 2;}
nav { order: 3; justify-content: center;}
}

@media screen and (max-width: 767px) {
header { width: 100%; height: 140px; padding-top: 5px; transition: 3.s:}
header .inner { flex-wrap: wrap; padding: 0 15px;}
header .logo { }
header .logo img { width: 181px; height: 42px;}

header .tellArea { width: 100%; background: rgba(230, 0, 18, 0.8); text-align: center; order: 1;flex-grow: 3; margin-bottom: 10px;}
header .tellArea dd { width: 100%; display: block; font-size: 1.4rem;}
header .tellArea dd a { padding: 0 15px; text-decoration: none;pointer-events: auto;}
header .logo { order: 2;}
nav { order: 3; justify-content: center;}

nav .gNav { display: none;}
nav .gNav li { border-bottom: 1px solid #ccc; margin: 0;}
nav .gNav li a { display: block; padding: 10px 40px; font-size: 1.8rem;}
#top nav .gNav li.top a, #top nav .gNav li.top a:hover,
#handyman nav .gNav li.handyman a, #handyman nav .gNav li.handyman a:hover,
#architecture nav .gNav li.architecture a, #architecture nav .gNav li.architecture a:hover,
#contact nav .gNav li.contact a, #contact nav .gNav li.contact a:hover
{ border-bottom: none; color: #0768ac; font-weight: 700;}

header .toggle { display: block; text-align: center; background: #0768ac; color: #fff; padding: 5px;}
header.open { background: #fff; height: 100vh; border-bottom: 1px solid #ccc; transition: .3s;}
header.open nav .gNav { display: block; width: 100vw; position: absolute; top: 140px; left: 0; border-top: 1px solid #0768ac;}
}


/* footer -----------------------------------------*/

.pagetop { display: none; position: fixed; bottom: 10px; right: 15px;}
.pagetop a { display: block; background: rgba(46, 167, 224, 0.8); text-align: center; color: #fff; font-size: 1.4rem; text-decoration: none; padding: 5px 10px;}
.pagetop a:after { content: "\f0aa"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-left: 5px; }

footer { background: #eaeaea; padding: 0;}
.footAdd { display: flex; padding: 30px;}
.footAdd h1 img { width: 151px; height: 35px;}
.footAdd div { padding-left: 30px; font-size: 1.4rem; color: #666;}
.footAdd div address { font-style: normal;}
.footAdd div ul { list-style: none; font-size: 1.2rem;}
.footAdd div ul li { display: inline-block; margin-right: 20px;}

.footLink { display: flex; padding: 10px 0; font-size: 1.2rem; color: #525252;}
.footLink ul { list-style: none;}
.footLink li { display: inline-block; padding: 0 10px;}
.footLink li:before { content: "\f138"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-right: 3px;}

.copyright { width: 100%; background: #fff; padding: 20px 0; text-align: center;}
.copyright span { display: block; font-size: 1rem;}


@media screen and (max-width: 767px) {
.pagetop { right: 0;}
.footAdd { display: block; padding: 15px;}
.footAdd div { padding-left:0;}
.footLink { display: block;}
.footLink .contentsLink { display: none;}
.footLink .importantLink { text-align: center;}
}


/* main -----------------------------------------*/
main { padding-top: 30px; position: relative;}
main section { display: block; background: #fff; padding: 30px; margin: 0 auto 50px auto; border-bottom: 10px solid #2ea7e0;}

@media screen and (max-width: 767px) {
main { width: 100%; margin: 0 auto; padding-bottom: 0; padding-top: 20px;}
main section { width: 100%; margin: 0 auto 50px auto;}
}

/* title ---------------------------------------*/
.centerCircle_title { display: inline-block; width: 100%; position: relative; margin: 30px 0; text-shadow: 0 0 2px white; text-align: center; font-size: 3.5rem; letter-spacing: .1; z-index: 3;}
.centerCircle_title:before { width: 85px; height: 85px; content: ""; background: #71bbde; border-radius: 50%; position: absolute; top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: -1;
}
.centerCircle_title + p { text-align: center;font-size: 2rem; color: #1f2774;}

.postit_title { box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #009; font-weight: 400; background: #ffc; box-shadow: 12px 0 0 0 #ffc, 0 12px 0 0 #ffc, 1px 15px 4px -3px rgba(0,0,0,0.2); margin: 30px 0; padding: 14px 0 5px 0; position: relative;}
.postit_title:before{ width: 0; height: 0; content:" "; border-width: 12px 12px 0 0;
border-style:solid; border-color:transparent; border-top-color:#cc9; position: absolute; top: 100%; left: 100%;}
.postit_title:after { width: 300px; height: 10px; content:" "; background: rgba(255,182,182,0.4); padding: 0; margin-top: -20px;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
transform: rotate(-1deg);
}


@media screen and (max-width: 767px) {
.centerCircle_title { font-size: 2.4rem;}
.postit_title:after { width: 100%;}
}



/* top -----------------------------------------*/
#top figure,
#top figure img { width: 100%; z-index: 1;}

#top section.blog {}
#top section.blog dl { display: flex; padding: 10px 30px;}
#top section.blog dl:nth-child(even) { background: #e7f0f8;}
#top section.blog dl:nth-child(odd) { border-bottom: 1px solid #ebeaea;}
#top section.blog dt { margin-right: 20px;}
#top section.blog dd a { border-bottom: 1px dotted #1f2774;}

@media screen and (max-width: 767px) {

#top section.blog dl { display: block; padding: 10px;}
#top section.blog dt { margin-right: 0;}
}

/* handyman -----------------------------------------*/
#handyman figure,
#handyman figure img { width: 100%; z-index: 1;}

#handyman main section:first-of-type { margin-top: -300px; background: #fff; padding: 300px 120px 30px 120px; z-index: 0;}
#handyman main section:first-of-type ul { list-style: none; display: flex; flex-wrap: wrap;}
#handyman main section:first-of-type ul li { width: 48%; margin: 0 1% 15px 1%; font-size: 2.4rem;}
#handyman main section:first-of-type ul li:before { content: "\f058"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-right: 3px; color: #0768ac;}

#handyman .titleArea { display: flex; align-items: center;}
#handyman .titleArea img { width: 150px; margin: 0 30px 0 0;}
#handyman .titleArea dl { width: calc(100% - 180px);}
#handyman .titleArea dt { font-size: 3rem; font-weight: 700; color: #1f2774;}
#handyman .titleArea dt > span { background:linear-gradient(transparent 60%, #fabe00 60%);}
#handyman .titleArea dd { display: flex; align-items: flex-end; flex-wrap: wrap;}
#handyman .titleArea dd > span { text-align: center; font-size: 1.8rem; color: #333; padding: 5px 10px; background: #1f2774; color: #fff;}
#handyman .titleArea dd p { font-size: 5rem; color: #e60012; font-weight: 700; line-height: 1.2; padding: 0; padding: 5px 10px 0 0; border-bottom: 3px solid #1f2774;}
#handyman .titleArea dd p > span { font-size: 1.8rem; color: #333; background: none;}
#handyman .titleArea dd .tel { width: 100%; font-size: 4rem; font-weight: bold;}
#handyman .titleArea dd .tel:before { content: "TEL:"; font-size: 1.6rem; font-weight: normal;}
#handyman .titleArea dd .tel > span { font-size: 1.4rem;}

#handyman .priceList { display: flex; }
#handyman .priceList div { width: 31%; margin: 0 1%; border-radius: 10px 10px 0 0; border-bottom: 10px solid #ccc; box-shadow:0px 0px 2px 2px #e0e0e0;}
#handyman .priceList div dt { text-align: center; color: #fff; background: #333; font-size: 3rem; font-weight: 700; padding: 20px 0; border-radius: 10px 10px 0 0; line-height: 1.4;}
#handyman .priceList div dt strong { font-size: 2rem;}
#handyman .priceList div dt span { font-size: 1.2rem; font-weight: 400;}
#handyman .priceList div dd { padding: 20px;}
#handyman .priceList div ul { list-style: none;}
#handyman .priceList div li { padding: 0 0 8px 15px;}
#handyman .priceList div li:before { content: "\f058"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding: 0 3px 0 0; margin-left: -15px; color: #ccc;}
#handyman .priceList div img { width: 100%;}

#handyman .priceList div.light { border-color: #e9507a;}
#handyman .priceList div.light dt { background: #e9507a;}
#handyman .priceList div.light li:before { color: #e9507a;}
#handyman .priceList div.medium { border-color: #00a2dd;}
#handyman .priceList div.medium dt { background: #00a2dd;}
#handyman .priceList div.medium li:before { color: #00a2dd;}
#handyman .priceList div.heavy { border-color: #936eae;}
#handyman .priceList div.heavy dt { background: #936eae;}
#handyman .priceList div.heavy li:before { color: #936eae;}

#handyman .oterNote { padding: 30px; font-size: 1.4rem; color: #525252;}
#handyman .oterNote ul { list-style: none;}
#handyman .oterNote li:before { content: "\f069"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding: 0 3px 0 0; margin-left: -15px;}

@media screen and (max-width: 767px) {
#handyman main section:first-of-type { margin-top: 0; background: #fff; padding: 30px 15px; margin-top: 15px;}
#handyman main section:first-of-type ul {  display: block;}
#handyman main section:first-of-type ul li { width: 100%; margin: 0 0 15px 0; font-size: 2rem;}
#handyman .titleArea { display: block;}
#handyman .titleArea img { display: block; width: 50%; margin: 0 auto;}
#handyman .titleArea dt { font-size: 2.6rem; margin-bottom: 15px;}
#handyman .titleArea dd { display: block;}
#handyman .titleArea dd p { text-align: center; margin-bottom: 15px;}
#handyman .priceList { display: block; margin-bottom: 0;}
#handyman .priceList div { width: 100%; margin: 0 0 20px 0;}
#handyman .titleArea dd .tel { font-size: 3rem; text-align: center;}
#handyman .titleArea dd .tel:before { content: "TEL:"; font-size: 1.6rem; font-weight: normal;}
#handyman .titleArea dd .tel > span {font-size: 2rem;}
}

/* architecture -----------------------------------------*/
#architecture div.message { width: 100%; padding: 20px; border: 5px solid #58b4f5; font-size: 120%; margin: 30px 0;}
#architecture .example { display: flex; flex-wrap: wrap;}
#architecture .example dl { width: 45%; margin: 0 2.5% 5% 2.5%;}
#architecture .example dt { font-weight: bold; text-align: center; padding: 5px; border-bottom: 1px solid #ccc;}
#architecture .example dd { display: flex;}
#architecture .example dd div { width: 48%; margin: 0 1%;}
#architecture .example dd div strong { display: block; text-align: center; font-weight: normal;}
#architecture .example dd div img { width: 100%;}

@media screen and (max-width: 767px) {
#architecture .example { display: block;}
#architecture .example dl { width: 100%; margin: 0 0 15px 0;}

}


/* other -----------------------------------------*/
#other table { margin: 30px; font-size: 1.4rem; color: #333;}
#other table th, #other table td { padding: 10px 20px; text-align: left; font-weight: 400;}
#other table th { width: 30%; background: rgba(204, 204, 204, 0.1); border-right: 1px solid #e6e6e6;}
#other table tr:nth-child(odd) { background: rgba(204, 204, 204, 0.2);}
#other table ul { list-style: none; padding-left: 15px; padding-top: 15px;}
#other table ul li { padding: 0 0 8px 15px;}
#other table ul li:before { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding: 0 3px 0 0; margin-left: -15px;}

@media screen and (max-width: 767px) {
#other table,
#other table th,
#other table td
{ display: block;}
#other table th { background: rgba(204, 204, 204, 0.2); border-right:none; border-bottom: 1px solid #ccc; text-align: center;}
#other table tr:nth-child(odd) { background: none;}
#other table td { margin-bottom: 10px;}
}


/* contact -----------------------------------------*/
#contact section { text-align: center; padding-bottom: 100px;}
#contact h2 { display: flex; align-items: center; justify-content: center; text-align: center; margin: 50px 0 10px;}
#contact h2:before { content: ""; width: 30px; height: 30px; margin-right: 10px;}
#contact h2.telTitle:before { background: url(../images/icon_tel.svg) 0 0 no-repeat; background-size: 100%;}
#contact h2.mailTitle:before { background: url(../images/icon_mail.svg) 0 0 no-repeat; background-size: 100%;}

#contact h2.mailTitle + p { margin-bottom: 30px;}

#contact .telNum { font-size: 30px; font-weight: bold;}
#contact .telCont { font-size: 14px;}
#contact .btMainForm { color: #fff; background: #71BBDE; border-radius: 10px; padding: 5px 30px; margin: 30px 0 100px;}