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: 20%; /*??????*/
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; /*??????????*/
}
/*??????????????????h3(??????)??????????*/
#contents h3 {
font-size: 14px; /*??????????*/
}
/*Service??????
---------------------------------------------------------------------------*/
/*h4????????????*/
.list h4 {
font-size: 16px; /*??????????*/
}
/*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;}
.flowbtn4{
font-family:'Trebuchet MS',sans-serif;/* ???????????? */
border-radius:50%;
display:inline-block;
width:70px;
height:70px;
font-size:30px;
transition:.5s;
text-decoration:none;
}
/* ????????????????? */
.flowbtn4:hover{
color:#fff!important;
}
/* Twitter */
.flowbtn4.fl_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitter??????? */
.flowbtn4.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Instagram */
.flowbtn4.insta_btn2 {
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagram??????? */
.flowbtn4.insta_btn2:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* Facebook */
.flowbtn4.fl_fb2{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebook??????? */
.flowbtn4.fl_fb2:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* Feedly */
.flowbtn4.fl_fd2{
border:solid 1px #6cc655;
color:#6cc655;
}
/* Feedly??????? */
.flowbtn4.fl_fd2:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* Pocket */
.flowbtn4.fl_pk2{
border:solid 1px #ef3f56;
color:#ef3f56;
}
/* Pocket??????? */
.flowbtn4.fl_pk2:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* ??? */
.flowbtn4.fl_hb2{
border:solid 1px #1ba5dc;
color:#1ba5dc;
}
/* ?????????? */
.flowbtn4.fl_hb2:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* YouTube */
.flowbtn4.fl_yu2{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTube??????? */
.flowbtn4.fl_yu2:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn4.fl_li2{
border:solid 1px #00c300;
color:#00c300;
}
/* LINE??????? */
.flowbtn4.fl_li2:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* ?????? */
.flowbtn4.fl_ma2{
border:solid 1px #f3981d;
color:#f3981d;
}
/* ????????????? */
.flowbtn4.fl_ma2:hover{
border:solid 1px #f3981d;
background:#f3981d;
}
/* ?????????? */
.flowbtn4 div{
font-size:11px;
font-weight:bold;
position:relative;
bottom:22px;
}
/* ul???????????? */
ul.snsbtniti{
padding:0!important;
}
/* ?????? */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}
/* ???????? */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}
}
