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

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700&display=swap');

/****************************** Gloval Reset */
html { height: 100%; }
body { 
font-size:18px;
line-height:1.8; 
height: 100%; 
font-family: 'Zen Kaku Gothic New', sans-serif;
color:#222;background: #fff;
-webkit-text-size-adjust:none;
 /*overflow:hidden;*/}
 
@media screen and (max-width: 768px) {
body { font-size:16px; line-height:1.6; }
img{width: 100%;}
}

/****************************** imgoverを指マークに */
.imgover { cursor:pointer; }

/****************************** link */
a{ outline : 0 ;}
a{text-decoration: none;}
a:hover { text-decoration: none; color:#010066;}

/****************************** マウスオーバーで画像半透明 */
a img:hover{
    opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
}

/****************************** ページ表示時*/
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/****************************** マージン等 */
.marT5 { margin-top: 5px; }
.marT10 { margin-top: 10px; }
.marT15 { margin-top: 15px; }
.marT20 { margin-top: 20px; }
.marT30 { margin-top: 30px; }
.marT40 { margin-top: 40px; }
.marB5 { margin-bottom: 5px; }
.marB10 { margin-bottom: 10px; }
.marB15 { margin-bottom: 15px; }
.marB20 { margin-bottom: 20px; }
.marB30 { margin-bottom: 30px; }
.marB40 { margin-bottom: 40px; }
.marB50 { margin-bottom: 50px; }
.clear{clear: both;}
.center{text-align: center;}
.right{text-align: right;}
.bold{font-weight: 500;}
.f80{font-size: 80%;}
.f90{font-size: 90%;}
.f110{font-size: 110%;}
.f120{font-size: 120%;}
.f130{font-size: 130%;}
.img100{width: 100%;}

/****************************** 機種別 */
.pconly{display: block;}
.sponly{display: none;}
@media screen and (max-width: 768px) {
.pconly{display: none;}
.sponly{display: block;}
}

/****************************** スマホのみTELリンク */
@media (min-width: 768px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

/****************************** 要素を順番にフェードイン */
.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}

/************************************************************
header 
************************************************************/
header{width: 100%;}
header h1{}
header h1 img{width: 100%;}

/*スマホ*/
@media screen and (max-width: 768px) {

}

/************************************************************
共通
************************************************************/
#container{width: 95%; max-width: 1000px; margin-left: auto; margin-right: auto; z-index: 1;}
section{margin-bottom: 60px;}
@media screen and (max-width: 768px) {
section{margin-bottom: 50px;}
}

/************************************************************
テーブル
************************************************************/
.tbl01{width: 100%; height: auto;}
.tbl01 dl{width: 100%; margin: 0 auto; padding-top: 10px;}
.tbl01 dt{padding-bottom: 10px; width: 200px; display: block; float: left; text-align: left; font-weight: normal;}
.tbl01 dd{margin-bottom:10px; border-bottom:1px dotted #ccc; padding-bottom:10px; padding-left:200px; text-align: left;}
@media screen and (max-width: 768px) {
.tbl01{background-color:rgba(255,255,255,0.6); background-blend-mode:lighten;}
.tbl01 dt{width: 100%; float: none; font-weight: 500; padding-bottom: 0;}
.tbl01 dd{padding-left:0px;}
}


/************************************************************
タイトル
************************************************************/
.title01 { color: #2A5158; text-align: center; font-size:300%; font-weight: 400; font-family: 'Outfit', sans-serif; margin: 20px auto;}
@media screen and (max-width: 768px) {
.title01{margin: 30px auto; font-size: 200%;}
}

/************************************************************
MAP
************************************************************/
.map{padding-left: 10px; color: #2A5158;}

/************************************************************
SERVICE
************************************************************/
#service{overflow: auto; width: 55%; margin: 0 auto 80px auto; font-size: 110%;}
#service dl {display: flex; flex-wrap: wrap;}
#service dt {width: 6%; font-weight: normal; text-align: center; color: #2A5158; vertical-align: bottom; padding-bottom: 10px;}
#service dd {width: 94%; padding-bottom: 10px;}

@media screen and (max-width: 768px) {
#service{width: 100%;}
}

/************************************************************
MAIL
************************************************************/
#mail{text-align: center; width: 100%;}
#mail img{width:250px;}

@media screen and (max-width: 768px) {
#mail img{width: 50%;}
}

/************************************************************
フッター
************************************************************/
footer{width: 100%;}
footer #copy{background: #2A5158; padding: 10px; text-align: center; color: #fff; font-size: 80%;}

@media screen and (max-width: 768px) {
footer #add img{width: 70%; margin: 0;}
}

/************************************************************
pagetop
************************************************************/
#page-top {position: fixed; bottom: 10px; right: 10px;}
#page-top a{border-bottom: none;}

@media screen and (max-width: 768px) {
#page-top {position: fixed; bottom: 5px; right: 10px;}
}