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

/*******************************
Reset
*******************************/
html,body,div,p,ul,ol,li,dl,dt,dd,pre,h1,h2,h3,h4,h5,h6,table,th,td,form,fieldset,input,textarea,select,img {
    margin:0;
    padding:0;
}

@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}

@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}

body {
    background:#f4f4f4;
    color:#333;
    text-align:left;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, sans-serif;
    line-height:140%;
	overflow-x: hidden;
}

input,
textarea{
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, sans-serif;
	font-size:12px;
	color:#333;
}

a {
    color:#333;
	text-decoration:none;
    outline:none;
}

img {
    border:0;
	vertical-align:bottom;
}

h1, h2, h3, h4, h5, h6 {
    line-height:120%;
    font-weight:normal;
}

p {
    line-height:140%;
	color:#333;
	font-size:100%;
}

td, th {
    text-align:left;
    vertical-align:top;
}

ul,ol,li {
    list-style-type:none;
}

/*******************************
contents
*******************************/
body, html {
    font-family: kozuka-gothic-pro, sans-serif;
    font-weight: 400;
}

.sp {
	display: none;
}

::selection {
	background:#eee; /* Safari */
}

::-moz-selection {
	background:#eee; /* Firefox */
}

/*******************************
header
*******************************/
.header {
    width:100%;
    height:90px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fff;
    position:sticky;
    position: -webkit-sticky;
    z-index:999999;
    top: 0;
    left: 0;
}
.header__logo {
    height:inherit;
    display:flex;
    align-items:center;
    padding-left:5%;
}
.header__logo__link {
    display: block;
}
.header__logo__link img {
    width:auto;
    height:50px;
}
.header__logo__link img.logo01 {
    height:30px;
    margin-left: 0.75em;
}
.header__navWrap {
    height:inherit;
    display:flex;
    align-items:center;
    position:relative;
}
.header__nav {
    height:inherit;
}
.header__nav__items {
    height:inherit;
    display:flex;
    align-items:center;
}
.header__nav__item {
    height:inherit;
    padding:0 20px;
}
.header__nav__link {
    height:inherit;
    display:flex;
    align-items:center;
    opacity:1;
}
.header__nav__link:hover {
    opacity:0.7;
}
.header__contact {
    height:inherit;
    display:flex;
    align-items:center;
    color:#fff;
    margin-left:6px;
}
.header__tel {
    height:inherit;
    display:flex;
    align-items:center;
    background-color:#a48b78;
    padding:0 42px;
}
.header__tel img {
    width:20px;
    height:26px;
    margin-top:-18px;
}
.header__tel__body {
    margin-left:4px;
}
.header__tel__number {
    font-size:32px;
    line-height:1;
    font-family: din-condensed, sans-serif;
}
.header__tel__number a {
    color:#fff;
}
.header__tel__time {
    font-size:12px;
    line-height:1;
    margin-top:4px;
    opacity:0.8;
    color: #fff;
}
.header__mail {
    height:inherit;
    display:flex;
    align-items:center;
    background-color:#075b97;
    padding:0 38px 0 20px;
    font-weight: 700;
}
.header__mail img {
    width:58px;
    height:58px;
}
.header__mail__body {
    margin-left:4px;
    text-align:center;
}
.header__mail__title {
    font-size:20px;
    font-weight:700;
    line-height:1;
    color: #fff;
}
.header__mail__subTitle {
    font-size:14px;
    font-weight:300;
    line-height:1;
    opacity:0.8;
    margin-top:8px;
    color: #fff;
    font-family: din-condensed, sans-serif;
}
.c-hamburger {
    height:inherit;
    aspect-ratio:1/1;
    display:none;
    background:#fff;
    position:relative;
}
.c-hamburger p {
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    font-size:28px;
    font-family:din-condensed, sans-serif;
    font-weight:300;
    line-height:1;
    color:#036eb8;
}
.c-hamburger span {
    position:absolute;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    display:inline-block;
    width:60%;
    height:2px;
    background:#036eb8;
    transition:transform 0.3s, opacity 0.3s;
}
.c-hamburger span:nth-child(1) {
    top:20%;
}
.c-hamburger span:nth-child(2) {
    top:40%;
}
.c-hamburger span:nth-child(3) {
    top:60%;
}
.c-hamburger.is-active span:nth-child(1) {
    top:40%;
    transform:translateX(-50%) translateY(-50%) rotate(45deg);
}
.c-hamburger.is-active span:nth-child(2) {
    opacity:0;
}
.c-hamburger.is-active span:nth-child(3) {
    top:40%;
    transform:translateX(-50%) translateY(-50%) rotate(-45deg);
}
.c-hamburger-top {
    height:inherit;
    aspect-ratio:1/1;
    background:#fff;
    position:relative;
    cursor:pointer;
    transition:transform 0.3s, opacity 0.3s;
}
.c-hamburger-top:hover {
    opacity:0.7
}
.c-hamburger-top p {
    position: absolute;
    bottom: 0.25em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    font-family: din-condensed, sans-serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    color: #036eb8;
}
.c-hamburger-top span {
    position:absolute;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    display:inline-block;
    width:60%;
    height:2px;
    background:#036eb8;
    transition:transform 0.3s, opacity 0.3s;
}
.c-hamburger-top span:nth-child(1) {
    top:20%;
}
.c-hamburger-top span:nth-child(2) {
    top:40%;
}
.c-hamburger-top span:nth-child(3) {
    top:60%;
}
.c-hamburger-top.is-active span:nth-child(1) {
    top:40%;
    transform:translateX(-50%) translateY(-50%) rotate(45deg);
}
.c-hamburger-top.is-active span:nth-child(2) {
    opacity:0;
}
.c-hamburger-top.is-active span:nth-child(3) {
    top:40%;
    transform:translateX(-50%) translateY(-50%) rotate(-45deg);
}
.modal-top {
    display:none;
    position:relative;
    position:fixed;
    top:90px;
    bottom:0;
    right:0;
    width:61.8%;
    background:#036eb8;
    z-index:9999;
}
.modal-top .topNav {
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 100%;
    padding-left: 10%;;
}
.modal-top .topNav ul {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.modal-top .topNav ul li.topNavEf01 {
    opacity: 0;
    transition: all 1s;
}
.modal-top .topNav ul li.topNavEf01.active {
    opacity: 1
}
.modal-top .topNav ul li.topNavEf01 a {
    display: block;
    text-align: left;
    font-size: 112.5%;
    color: #fff;
}
.modal-top .topNav ul li.topNavEf01 a span {
    display: block;
    font-family: din-condensed, sans-serif;
    line-height: 1;
    font-weight: 300;
    opacity: 0.5;
    font-size: 87.5%;
}
.modal-top .topNav ul.block01 {
    width: 48em;
    margin-bottom: 2.5em;
}
.modal-top .topNav ul.block01 li {
    width: 50%;
    display: flex;
    align-items: flex-start;
    white-space: nowrap;
    margin: 0.75em 0;
}
/*******************************
layout
*******************************/
#main {
	background: #f4f4f4;
	padding-top: 1.5rem;
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

#article {
	width: 68%;
}

#side {
	width: 25%;
}

#side #contactBtn01 {
	margin-bottom: 1.5rem;
}

#side #contactBtn01 a {
	display: block;
}

#side #contactBtn01 a img {
	width: 100%;
}

#side .bnr01 {
	margin-bottom: 1.5rem;
}

#side .bnr01 img {
	width: 100%;
}

#side #popular {
	background: #fff;
	padding: 1rem;
	margin-top: 2rem;
}

#side #popular dt {
    color: #000;
    font-size: 1.6rem;
    border-bottom: 1px solid #000;
    font-family: din-condensed, sans-serif;
    font-weight: 400;
}

#side #popular dd ul {
}

#side #popular li {
	position: relative;
	margin: 1.5rem 0 0 1rem;
	padding-left: 1.5rem;
	border-left: 1px solid #ccc;
}

#side #popular li:first-child::before {
	content: "1";
	background: #777;
	color: #fff;
	text-align: center;
	padding: 0.3em 0.7em;
	border-radius: 100%;
	position: absolute;
	top: -0.4rem;
	left: -1em;
	z-index: 2;
	font-weight: bold;
}

#side #popular li:nth-child(2)::before {
	content: "2";
	background: #999;
	color: #fff;
	text-align: center;
	padding: 0.3em 0.7em;
	border-radius: 100%;
	position: absolute;
	top: -0.4rem;
	left: -1em;
	z-index: 2;
	font-weight: bold;
}

#side #popular li:nth-child(3)::before {
	content: "3";
	background: #ccc;
	color: #fff;
	text-align: center;
	padding: 0.3em 0.7em;
	border-radius: 100%;
	position: absolute;
	top: -0.4rem;
	left: -1em;
	z-index: 2;
	font-weight: bold;
}

.pagination h2 {
	display: none;
}

.pagination .nav-links .next {
	background: url(/wp-content/themes/devorcelp01/images/arrow01.png) 0 0 no-repeat;
	background-size: 8px auto;
	height: 0;
	overflow: hidden;
	padding: 16px 0 0;
	border-radius: 0;
	vertical-align: middle;
	width: 8px;
	margin: 0 0.8rem;
}

.pagination .nav-links .prev {
	background: url(/wp-content/themes/devorcelp01/images/arrow04.png) 0 0 no-repeat;
	background-size: 8px auto;
	height: 0;
	overflow: hidden;
	padding: 16px 0 0;
	border-radius: 0;
	vertical-align: middle;
	width: 8px;
	margin: 0 0.8rem;
}

.nav-links {
	text-align: center;
	letter-spacing: -.4em;
	margin-top: 1rem;
}

.nav-links .page-numbers {
	display: inline-block;
	letter-spacing: normal;
	padding: 0.5rem 0.9rem;
	background: #fff;
	border-radius: 100%;
	margin: 0 0.3rem;
}

.nav-links .page-numbers.current {
	background: #777;
	color: #fff;
}

/*******************************
footer
*******************************/
#toTop {
	position: fixed;
	bottom: 185px;
	right: 20px;
	width: 3%;
	cursor: pointer;
	z-index: 200;
	-webkit-transition: .5s;
	transition: .5s;
}

#toTop:hover {
	opacity: 0.75;
}

#toTop img {
	width: 100%;
}

#trackingArea01 {
	display: none;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 240px;
	z-index: 250;
}

#trackingArea01 a {
	display: block;
}

#trackingArea01 a img {
	width: 100%;
}

.toContact {
    width:100%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%) translateY(-12%);
}

.toContact__head {
    background:#fff;
    padding:30px 28px 40px;
    text-align:center;
}

.toContact__head .sectionTitle {
    font-size: 50px;
    font-family: din-condensed, sans-serif;
    font-weight: 400;
    color: #036eb8;
    line-height: 1;
    text-align: center;
    letter-spacing: 2px;
}

.toContact__head .sectionSubtitle {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    line-height: 1.8;
    text-align: center;
}

.toContact__head .toContact__text {
    color: inherit;
}

.toContact__text {
    margin-top:0px;
}

.toContact__body {
    display:flex;
    color:#fff;
    background:#fff;
}

.toContact__tel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background-color: #a48b78;
    padding: 22px 0;
}

.toContact__tel__img {
    align-self:flex-start;
    width:28px;
    height:36px;
    margin-top: 0.35em;
}

.toContact__tel__detail {
    margin-left:8px;
}
.toContact__tel__number {
    font-size: 44px;
    font-family: din-condensed, sans-serif;
    line-height: 1;
    color: #fff;
}
.toContact__tel__number a {
    color:#fff;
}

.toContact__tel__time {
    margin-top:6px;
    line-height:1;
    opacity:0.8;
}

.toContact__mail {
    display:flex;
    align-items:center;
    justify-content:center;
    width:50%;
    background-color:#075b97;
    padding:12px 0;
    opacity:1;
}

.toContact__mail__img {
    width:76px;
    height:76px;
}

.toContact__mail__detail {
    text-align:center;
    margin-left:8px;
}
.toContact__mail__title {
    font-size: 26px;
    font-weight: 700;
}

.toContact__mail__subTitle {
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    opacity: 0.8;
    font-family: din-condensed, sans-serif;
}

.footer {
    position: relative;
    background: #036eb8;
    padding-top: 20em;
    padding-bottom: 5em;
    margin-top: 6em;
}

.footer a, .footer p {
    color: #fff;
}

.footer .inner {
    width: 100%;
    max-width: 1240px;
    padding-right: 20px;
    padding-left: 20px;
    margin: 0 auto;
}

.footer__body {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #fff;
}

.footer__content1 {
    width: 23%;
    margin-right: 30px;
}

.footer__logo {
    width: 60%;
	margin: 0 0 20px;
}

.footer__logo img {
    width: 100%;
    height: auto;
}

.footer__company {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
/*    border-top: 1px solid #fff;*/
    padding-top: 12px;
}

.footer__company__names {
    width: 60%;
    min-height: 90px;
}

.footer__company__name {
    font-size: 20px;
    white-space: nowrap;
}

.footer__content2:nth-last-child(-n+3) .footer__company__name,
.footer__content3 .footer__company__name {
    font-size: 16px;
}

.footer__company__name--bold {
    font-weight: bold;
    line-height: 1.4;
}

.footer__company__subName {
    font-size: 14px;
    white-space: nowrap;
    margin-top: 0.25em;
}

.footer__company__subName--big {}

.footer__sns {
    width: 30%;
    display: flex;
    justify-content: space-between;
}

.footer__instagram {
    width: 45%;
}

.footer__instagram img {
    width: 100%;
    height: auto;
}

.footer__twitter {
    width: 45%;
}

.footer__twitter img {
    width: 100%;
    height: auto;
}

.footer__content2 {
    width: 24%;
    margin-right: 10px;
}

.footer__company__meta {
    margin-top: 1.5em;
}

.footer__company__postcode {
    font-size: 14px;
}

.footer__company__address {
    font-size: 13px;
}

.footer__company__contact {
    margin-top: 0.75em;
}

.footer__company__tel {
    font-size: 24px;
    font-family: din-condensed, sans-serif;
    display: block;
    color: #fff;
}

.footer__company__fax {
    font-size: 16px;
    font-weight: 300;
    font-family: din-condensed, sans-serif;
    margin-top: 0.25em;
    display: block;
    color: #fff;
}

.footer__content3 {
    width: 25%;
}

.footer__content4 {
    margin-top: 1em;
}

.footer__company__btn {
    display: inline-block;
    text-align: center;
    line-height: 1;
    padding: 12px 0;
    width: 100%;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 100px;
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 10px;
}

.footer__company__btn:hover {
    background-color: #fff;
    color: #036eb8;
}

.footer__links {
    margin-top: 3.5em;
    font-size: 14px;
    color: #fff;
}

.footer__links ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer__links ul li {
    margin: 0 1em;
}

.footer__copyright {
    font-size: 12px;
    text-align: center;
    margin-top: 50px;
    color: #fff;
}