html,body {height: 100%;} body { margin: 0px; padding: 0px; color: #776955; /*????????????*/ font-family:"???????????? Pro W3", "Hiragino Kaku Gothic Pro", "????????", Meiryo, Osaka, "???? ??????????", "MS PGothic", sans-serif; /*????????????*/ font-size: 16px; /*??????????*/ line-height: 2; /*????*/ background: #fff; /*??????*/ -webkit-text-size-adjust: none; } h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;} ul {list-style-type: none;} img {border: none;max-width: 100%;height: auto;vertical-align: middle;} ol {padding-left: 40px;padding-bottom: 15px;} table {border-collapse:collapse;font-size: 100%;border-spacing: 0;} iframe {width: 100%;} @keyframes opa1 { 0% {opacity: 0;} 100% {opacity: 1;} } /*?????????????????? ---------------------------------------------------------------------------*/ a { color: #776955; /*??????????????????*/ transition: 0.5s; /*????????????????????????????????????????0.5????*/ } a:hover { color: #ff4765; /*????????????????????*/ text-decoration: none; /*????????????????????????????????????????????????????????*/ } /*???????????????????????????????????????????????????????? ---------------------------------------------------------------------------*/ header { height: 100%; overflow: auto; position: relative; background: #f8c68b; /*??????*/ } /*????????*/ header #logo img { display: block; width: 20%; /*????????*/ position: absolute; left: 40%; /*????????????????????????????????????????????????????????????????????*/ bottom: 50%; /*????????????????????????????????????????????????????????????????????*/ } /*???????? ---------------------------------------------------------------------------*/ /*????????????????????????????*/ #menubar { position: absolute; bottom: 20%; /*????????????????????????????????????????????????????????????????????*/ left: 0px; width: 100%; text-align: center; } /*????????????????????????*/ #menubar li { display: inline-block; margin: 0 1%; animation-name: opa1; animation-delay: 1S; animation-duration: 1S; animation-fill-mode: both; } #menubar li a { text-decoration: none;display: block;text-align: center; width: 140px; /*????????????*/ color: #fff; /*??????*/ border-bottom: 2px solid transparent; /*????????????????????transparent????????????*/ padding-bottom: 7px; /*????????????????????????*/ } /*??????????????????*/ #menubar li a:hover { border-bottom: 2px solid #fff; /*??????????????????*/ letter-spacing: 0.1em; /*??????????????????????????????????????????????????????????????????*/ } /*????????????header??footer???????????????????????????????? ---------------------------------------------------------------------------*/ #container { max-width: 1400px; /*??????????????????????????????????*/ margin: 0 auto; } /*????????????????container???????????????? ---------------------------------------------------------------------------*/ #contents { overflow: hidden; padding: 50px 3%; } #contents section + section { padding-top: 50px; } /*??????????????????h2(??????)??????????*/ #contents h2 { margin-bottom: 20px; clear: both; padding: 0 20px; font-size: 20px; /*??????????*/ text-align: center; /*??????????????????*/ letter-spacing: 0.1em; /*??????????????????????????????*/ background: #f8b668; /*??????*/ color: #fff; /*??????*/ border-radius: 100px; /*??????????????????????????????????????????????????*/ } /*??????????????????h3(??????)??????????*/ #contents h3 { margin-bottom: 20px; clear: both; padding: 0 20px; font-size: 18px; /*??????????*/ text-align: center; /*??????????????????*/ letter-spacing: 0.1em; /*??????????????????????????????*/ border: 2px solid #f8b668; /*??????????????????*/ border-radius: 100px; /*??????????????????????????????????????????????????*/ background: #fff; /*??????*/ } /*??????????????????p(????)????????*/ #contents p { padding: 0px 20px 20px; /*????????????????????*/ } /*????????????*/ #contents p + p { margin-top: -5px; } #contents h2 + p, #contents h3 + p { margin-top: -10px; } /*Service?????? ---------------------------------------------------------------------------*/ /*????????????????????*/ .list { overflow: hidden; line-height: 1.5; border-bottom: 1px solid #f8b668; /*??????????????????*/ padding: 20px; /*????????????????*/ } /*????????list??????????????????????????????????????*/ .list:first-of-type { border-top: 1px solid #f8b668; } /*h4????????????*/ .list h4 { font-size: 20px; /*??????????*/ margin-bottom: 10px; } /*??????????*/ .list img { width: 40%; /*??????*/ float: left; /*??????????????????*/ margin-right: 3% /*??????????????????????????*/ } /*????????*/ .list p { padding: 0 !important; } /*???????????? ---------------------------------------------------------------------------*/ footer { clear: both; text-align: center; background: #f8c68b; /*??????*/ color: #fff; /*??????*/ font-size: 85%; /*??????????*/ } footer a { color: #fff; /*??????????????????????*/ text-decoration: none; } footer a:hover { color: #fff; /*????????????????????*/ } footer .pr { display: block; font-size: 80%; } /*???????????????????????????????????????????? ---------------------------------------------------------------------------*/ /*??????????????????*/ #new dl { padding-left: 20px; margin-bottom: 15px; } /*????????*/ #new dt { float: left; width: 9em; letter-spacing: 0.1em; } /*????????*/ #new dd { padding-left: 9em; } /*???????? ---------------------------------------------------------------------------*/ /*????????????????????????????????????caption??*/ .ta1 caption { border: 1px solid #ccc; /*????????????????????????????*/ border-bottom: none; /*????????????*/ text-align: center; /*??????????????????*/ background: #f8cf9f; /*??????*/ color: #fff; /*??????*/ font-weight: bold; /*??????*/ padding: 10px; /*????????????????*/ } /*????????????????????????????????????tamidashi??*/ .ta1 th.tamidashi { width: auto; text-align: center; /*??????????????????*/ background: #f8cf9f; /*??????*/ color: #fff; /*??????*/ } /*ta1????????????????????*/ .ta1 { table-layout: fixed; width: 100%; margin: 0 auto 20px; background: #fff; /*??????*/ } .ta1, .ta1 td, .ta1 th { word-break: break-all; border: 1px solid #ccc; /*????????????????????????????*/ padding: 10px; /*????????????????*/ } /*??????????????????????*/ .ta1 th { text-align: center; /*????????????*/ width: 30%; /*??*/ } /*PAGE TOP?????????? ---------------------------------------------------------------------------*/ body .nav-fix-pos-pagetop a { display: none; } body.is-fixed-pagetop .nav-fix-pos-pagetop a { display: block;text-decoration: none;text-align: center;position: fixed;animation-name: opa1;animation-duration: 1s;animation-fill-mode: forwards; width: 60px; /*??????????*/ line-height: 60px; /*????????????*/ bottom: 50px; /*??????????????????????????*/ right: 3%; /*??????????????????????????*/ background: #555; /*????????????????????????*/ background: rgba(0,0,0,0.5); /*????????0,0,0????????????0.5??????50%??????????????*/ color: #fff; /*??????*/ border-radius: 50%; /*??????????????????????????????????????????????????????*/ } body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover { background: #999; /*????????????????????*/ } /*??????????????NEW???????? ---------------------------------------------------------------------------*/ .newicon { background: #F00; /*??????*/ color: #FFF; /*??????*/ font-size: 70%; line-height: 1.5; padding: 2px 5px; border-radius: 2px; margin: 0px 5px; vertical-align: text-top; } /*ul.disc,ol???? ---------------------------------------------------------------------------*/ ul.disc { list-style: disc; padding: 0 20px 20px 55px; } ol { padding: 0 20px 20px 42px; } /*?????? ---------------------------------------------------------------------------*/ .look {background: #fff;border: 1px solid #ccc;padding: 5px 10px;border-radius: 4px;} .mb15,.mb1em {margin-bottom: 15px;} .clear {clear: both;} ul.disc {padding: 0em 25px 15px 40px;list-style: disc;} .color1, .color1 a {color: #ff4765;} .pr {font-size: 10px;} .wl {width: 96%;} .ws {width: 50%;} .c {text-align: center;} .r {text-align: right;} .l {text-align: left;} .big1 {font-size: 40px;letter-spacing: 0.2em;} .mini1 {font-size: 11px;display: inline-block;line-height: 1.5;} .sh {display: none;} /*??????800px?????????? ------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width:800px){ /*???????????????????????????????????????????????????????? ---------------------------------------------------------------------------*/ /*????????*/ header #logo img { width: 30%; /*????????*/ left: 35%; /*????????????????????????????????????????????????????????????????????*/ } } /*??????480px?????????? ------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width:480px){ /*???????????????????????????????????????????????????????? ---------------------------------------------------------------------------*/ /*????????*/ header #logo img { width: 30%; /*????????*/ left: 35%; /*????????????????????????????????????????????????????????????????????*/ } /*????????????header??footer???????????????????????????????? ---------------------------------------------------------------------------*/ #container { font-size: 12px; font-size: 2.93vw; } /*????????????????container???????????????? ---------------------------------------------------------------------------*/ /*??????????????????h2(??????)??????????*/ #contents h2 { font-size: 16px; /*??????????*/ } /* #contents h3 { font-size: 14px; } ---------------------------------------------------------------------------*/ .list h4 { font-size: 18px; } /*ul.disc,ol???? ---------------------------------------------------------------------------*/ ul.disc { padding: 0 0px 20px 35px; } ol { padding: 0 0px 20px 35px; } /*?????? ---------------------------------------------------------------------------*/ .ws {width: 96%;} .big1 {font-size: 22px;letter-spacing: normal;}