html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
html {
font-size: 62.5%;
overflow-y: scroll;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
background-color: #ccc;
}
::-webkit-scrollbar-thumb {
background: #333;
width: 180px;
}
body{
line-height: 1.6;
font-size: 16px;
font-size: 1.6rem;
word-wrap: break-word;
color: #333;
background-color: #fcfcfc;
overflow: hidden;
font-family: "Noto Sans JP", "sans-serif";
font-weight: normal;
font-display: swap;
}
@font-face {
src:url("../fonts/NotoSansJP-Regular2.woff2") format("woff2");
font-family: "Noto Sans JP";
font-weight:400;
font-style: normal;
font-display: swap;
}
@font-face {
src:url("../fonts/NotoSansJP-Bold2.woff2") format("woff2");
font-family: "Noto Sans JP";
font-weight:700;
font-style: normal;
font-display: swap;
}
img{
image-rendering: -webkit-optimize-contrast;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin:0;
}
p {
font-size: 1.4rem;
color: #333;
margin:0;
}
a{
text-decoration:none;
color: #303030;
}
dt {
font-weight: 400;
}
dd {
margin: 0;
}
dl{
margin: 0;
}
.post, .page {
margin:0;
}
ul,ol {
list-style: none;
margin: 0;
padding: 0;
}
/***********************************************************/
/***********************************************************/
/*header*/
header {
height: 60px;
width: 1600px;
position: fixed;
top: 7.5vh;
left: 50%;
transform: translate(-50%, -50%);
background: #858585;
border-bottom-left-radius: 25px;
border-top-right-radius: 25px;
z-index: 9999;
box-shadow: 0px 3px 6px #000000;
}
.header__wrap {
height: inherit;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4rem;
}
.header__wrap h1{
display: flex;
align-items: center;
justify-content: center;
color:#fff;
}
header nav{}
header nav ol {
display: flex;
align-items: center;
flex-direction: row;
}
header nav ol li {
font-size: 20px;
padding: 0 1rem;
}
header nav ol li a{
color:#fff;
}
.header__wrap .active{
border-bottom: 2px solid #fff;
}
.header__contact {
background: #fff;
padding: .5rem 2rem;
color: #303030;
border-radius: 25px;
}
.header__contact:hover{
background: #303030;
color: #fff;
}
.js-scrollify-move:hover{
color:#303030;
}
.header--unpinned {
opacity: 0 !important;
}
/***********************************************************/
/***********************************************************/
/*フッター*/
footer {
background: #F5F5F7;
padding: 4rem 0 5rem;
}
.footer__wrap {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 1600px;
margin: 0 auto;
border-top: 1px solid;
padding: .5rem 0 0;
}
.footer__wrap img{
}
.footer__wrap ul {
display: flex;
flex-direction: row;
}
.footer__wrap ul li{
padding-left:1rem;
font-size:12px;
}
.footer__wrap h2 {
display: flex;
align-items: center;
}
/***********************************************************/
/***********************************************************/
/*協力企業募集フォーム*/
table.CF7_table {
width: 650px;
margin: 0 auto;
}
.CF7_table tr {
display: flex;
align-items: center;
justify-content: space-between;
}
.CF7_table th {
text-align: left;
vertical-align: top;
width: 30%;
}
.CF7_table_last{
height: 200px;
}
.CF7_table td {
width: 70%;
}
.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
display:table;
}
/*入力欄*/
.CF7_table input, .CF7_table textarea {
width: 100%;
border-radius: 30px;
margin: 1rem 0;
border: unset;
background: #EFEFEF;
padding: 0 20px;
box-sizing: border-box;
}
.CF7_table input{
height: 35px;
}
.CF7_table textarea {
height: 200px;
padding: 20px;
}
.CF7_table ::placeholder {
color:#797979;
}
.wpcf7 input.wpcf7-submit {
background: #444444;
border: 0;
font-weight: bold;
color: #fff;
font-size: 20px;
margin: 0 auto;
width: 280px;
border-radius: 50px;
box-shadow: 0px 3px 6px;
padding: .5rem 0;
}
.CF7_btn {
text-align: center;
margin-top: 2rem;
}
.wpcf7-spinner{
width:0;
margin:0;
}
/*「必須」文字*/
.CF7_req {
font-size: 12px;
padding: 3px 8px;
background: #444444;
color: #fff;
border-radius: 20px;
margin-left: 1rem;
}
/*「任意」文字*/
.CF7_unreq {
font-size: 12px;
padding: 3px 8px;
background: #858585;
color: #fff;
border-radius: 20px;
margin-left: 1rem;
}
/***********************************************************/
/***********************************************************/
/*========= ローディング画面のためのCSS ===============*/
#splash {
position: fixed;
width: 100%;
height: 100%;
background: #333;
z-index: 9999999;
text-align:center;
color:#fff;
}
#splash-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
.splashbg{
display: none;
}
/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
display: block;
content: "";
position:fixed;
z-index: 9999999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
transform: scaleY(0);
background-color: #333 !important;
animation-name:PageAnime;
animation-duration:1.2s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
}
@keyframes PageAnime{
0% {
transform-origin:bottom;
transform:scaleY(0);
}
50% {
transform-origin:bottom;
transform:scaleY(1);
}
50.001% {
transform-origin:top;
}
100% {
transform-origin:top;
transform:scaleY(0);
}
}
.home .site-main,.home #header{
opacity: 0;
}
.home.appear .site-main,
.home.appear #header{
animation-name:PageAnimeAppear;
animation-duration:1s;
animation-delay: 1.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes PageAnimeAppear{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/***********************************************************/
/***********************************************************/
/*スマホのみ表示*/
@media only screen and (max-width:768px) {
.sp_only{
display:initial;
}
.pc_only{
display:none;
}
}
@media only screen and (min-width:769px) {
.sp_only{
display:none;
}
.pc_only{
display:initial;
}
}
/***********************************************************/
/***********************************************************/
/* レスポンシブ */
@media only screen and (min-width:1981px) {
}
@media only screen and (min-width:1400px) and (max-width:1800px) {
header {
height: 60px;
width: 1400px;
}
table.CF7_table {
width: 550px;
}
.CF7_table th {
width: 35%;
}
.CF7_table td {
width: 65%;
}
.CF7_table input {
height: 30px;
}
.CF7_table_last {
height: 175px;
}
.CF7_table textarea {
height: 175px;
padding: 15px;
}
footer {
padding: 3rem 0 4rem;
}
.footer__wrap {
width: 1400px;
}
}
@media only screen and (max-width:1449px) {
header {
height: 50px;
width: 1200px;
top: 5.5vh;
}
header nav ol li {
font-size: 16px;
padding: 0 1.5rem;
}
header nav ol li a {
font-size: 16px;
}
table.CF7_table {
width: 480px;
}
.CF7_table th {
width: 35%;
font-size: 14px;
}
.CF7_table td {
width: 65%;
}
.CF7_table input {
height: 30px;
}
.CF7_table_last {
height: 175px;
}
.CF7_table textarea {
height: 175px;
padding: 15px;
}
.CF7_req {
font-size: 10px;
}
footer {
padding: 3rem 0 4rem;
}
.footer__wrap {
width: 1200px;
}
}
@media only screen and (max-width:1370px) {
footer {
padding: 2rem 0 2rem;
}
}
@media only screen and (min-width:1025px) and (max-width:1280px) {
}
@media only screen and (min-width:769px) and (max-width:1024px) {
}
@media only screen and (max-width:768px) {
header {
height: 50px;
width: 100%;
top: 5%;
padding: 0px 1rem;
box-sizing: border-box;
background: unset;
box-shadow: unset;
}
.header__wrap_sp_no{
display:none;
}
.header__wrap.sp_only.hide {
transform:translateY(-150px) !important;
transition: .7s ;
}
.header__wrap.sp_only {
padding: unset;
display: flex;
justify-content: flex-start;
transition: .7s;
flex-direction: column;
align-items: flex-end;
}
.header__wrap.sp_only a{
box-sizing: border-box;
}
.header__wrap.sp_only h1 {
background: #fff;
height: 50px;
border-bottom-left-radius: 25px;
border-top-right-radius: 25px;
box-shadow: 0 1px 2px #616161;
display: flex;
align-items: center;
padding: 3px 20px;
color: #333;
}
.header__wrap.sp_only h1 img {
padding-right: 5px;
width: 40px;
}
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn8 {
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 2px #616161;
margin-top: 1rem;
}
/*ボタン内側*/
.openbtn8 .openbtn-area{
transition: all .6s;/*アニメーションの設定*/
width:50px;
height:50px;
}
.openbtn8 span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background: #333;
width: 45%;
}
.openbtn8 span:nth-of-type(1) {
top:15px;
}
.openbtn8 span:nth-of-type(2) {
top:23px;
}
.openbtn8 span:nth-of-type(3) {
top:31px;
}
/*activeクラスが付与されると .openbtn-areaが360度回転し、その中の線が回転して×に*/
.openbtn8.active_menu .openbtn-area{
transform: rotate(360deg);
}
.openbtn8.active_menu span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn8.active_menu span:nth-of-type(2) {
opacity: 0;
}
.openbtn8.active_menu span:nth-of-type(3){
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
/*メニュー本体*/
.sp__nav {
position: absolute;
z-index: -9999;
/*transform: translateY(500px) !important;*/
/*transition: 1s;*/
width: 100vw;
height: 100vh;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: -500px;
}
.sp__nav.active_nav{
background: #333;
width: 100vw;
position: fixed;
height: 100vh;
top: 0;
left: 0;
z-index: 9000;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translate3d(0,0,0); !important;
/*transition: 1s;*/
opacity: 1;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform: translate3d(0,0,0);
}
.sp__nav img{
display: none;
}
.sp__nav nav{
width: 80%;
margin: 0 auto;
}
.sp__nav nav li {
text-align: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
}
.sp__nav nav li a {
color: #fff;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.sp__nav nav .header__contact {
width: fit-content;
background: unset;
color: #fff;
text-align: center;
display: block;
margin: 0 auto;
padding: 0;
}
body.no_scroll{
overflow: hidden;
background: #cccccc;
}
body.no_scroll .header__wrap.sp_only.hide{
transform:unset !important;
}
.contact_box {
width:100%;
margin: 0 auto;
}
table.CF7_table{
width:90%;
}
#table01 th, #table01 td {
padding: 15px 0;
}
#table01 td {
text-align: center;
}
.CF7_table tr, .CF7_table td, .CF7_table th {
display: block;
width: 100%;
line-height: 1.5rem;
}
.CF7_table th {
padding: 15px 0px 0px 10px;
}
table.CF7_table {
padding: 20px 20px 40px;
}
.wpcf7 input.wpcf7-submit {
width: 60%;
display: block;
}
.CF7_btn {
margin-top: unset;
}
.CF7_table_last {
height: unset;
}
.CF7_table input, .CF7_table textarea {
font-size: 16.1px;
}
.CF7_unreq ,.CF7_req {
font-size: 10px;
line-height: 1;
padding: 2px 6px;
}
.footer__wrap {
width: 96%;
flex-direction: column;
}
.footer__wrap img {
padding: 1rem 0 1.5rem;
}
.footer__wrap ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.footer__wrap ul li {
padding-left: unset;
font-size: 10px;
}
.footer__wrap ul li:nth-child(1) {
order: 4;
margin-top: 1rem;
color: #999;
}
.footer__wrap ul li:not(:first-child){
width:30%;
text-align:center;
}
}