html {
font-size: 62.5%; }
body {
font-size: 1.6em;
min-width: 1280px; }
@media (max-width: 768px) {
body {
min-width: 0; } }
img {
vertical-align: top; }
@font-face {
font-family: 'Rage Italic';
font-style: normal;
font-weight: normal;
src: local("Rage Italic"), url("RAGE_1.woff") format("woff"); }
.link_button {
display: inline-flex;
justify-content: center;
align-items: center;
font-family: "Hannari", serif;
font-size: 2.2rem;
position: relative;
z-index: 2; }
@media (max-width: 768px) {
.link_button {
font-size: 1.6rem;
display: block;
margin-left: 10px;
margin-right: 10px; } }
.link_button a {
color: #ffffff;
text-decoration: none;
padding: 16px 32px 20px;
border: 3px solid #a16c4e;
border-radius: 10px;
background-position: center;
position: relative;
background: #582b0c;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center; }
@media (max-width: 768px) {
.link_button a {
padding: 16px 10px 20px;
width: 100%;
box-sizing: border-box; } }
.link_button a:after {
content: '';
position: absolute;
background-image: url("../images/common/btn_bg.jpg");
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4; }
.link_button a span {
position: relative;
z-index: 3;
background-image: url("../images/common/btn_border.png");
background-repeat: repeat-x;
background-position: center bottom;
padding-bottom: 5px; }
.link_button a:before {
content: url("../images/common/btn_arrow.png");
margin-right: 10px;
position: relative;
z-index: 3; }
header {
margin-bottom: -60px;
position: relative;
z-index: 1000; }
@media (max-width: 768px) {
header {
margin-bottom: 0; } }
header h1 {
background: #23325e;
color: #ffffff;
margin: 0;
font-size: 1.2rem;
text-align: center;
font-weight: normal;
padding: 16px 0; }
@media (max-width: 768px) {
header h1 {
display: none; } }
header nav.pc {
background-image: url("../images/common/nav_bg.png");
background-position: center;
height: 100px;
padding-bottom: 60px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hannari", serif;
font-size: 1.8rem; }
@media (max-width: 768px) {
header nav.pc {
display: none; } }
header nav.pc a {
color: #000000;
text-decoration: none;
display: flex;
height: 65px;
width: 160px;
align-items: center;
justify-content: center;
flex-direction: column; }
header nav.pc a:before {
height: 35px;
display: flex;
align-items: center;
margin-bottom: 4px; }
header nav.pc .logo {
border-left: 1px solid #23325e;
border-right: 1px solid #23325e;
margin: 0 20px;
order: 4; }
header nav.pc .logo a {
padding: 0 30px; }
header nav.pc .top {
order: 1; }
header nav.pc .top a:before {
content: url("../images/common/nav_top.png"); }
header nav.pc .about {
order: 2; }
header nav.pc .about a:before {
content: url("../images/common/nav_about.png"); }
header nav.pc .plan {
order: 3; }
header nav.pc .plan a:before {
content: url("../images/common/nav_plan.png"); }
header nav.pc .works {
order: 5; }
header nav.pc .works a:before {
content: url("../images/common/nav_works.png"); }
header nav.pc .recruit {
order: 6; }
header nav.pc .recruit a:before {
content: url("../images/common/nav_recruit.png"); }
header nav.pc .company {
order: 7; }
header nav.pc .company a:before {
content: url("../images/common/nav_company.png"); }
header .sp_header {
display: none; }
@media (max-width: 768px) {
header .sp_header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 10px solid #23325e;
height: 82px;
position: relative;
box-sizing: border-box;
background: #ffffff; } }
header .sp_header .logo {
margin: 0;
margin-left: 5px; }
header .sp_header .menu_button {
width: 40px;
height: 40px;
background-color: #23325e;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
margin-right: 5px; }
header .sp_header #sp_menu {
display: none; }
header .sp_header #sp_menu:checked + nav {
display: block; }
header .sp_header nav {
position: absolute;
top: 82px;
left: 0;
width: 100%;
background: #ffffff;
display: none; }
header .sp_header nav p {
border-bottom: 1px solid #23325e;
margin: 0; }
header .sp_header nav a {
color: #000000;
text-decoration: none;
display: flex;
align-items: center;
padding: 1em; }
header .sp_header nav a:before {
width: 42px;
display: flex;
justify-content: center;
margin-right: 5px; }
header .sp_header nav .top a:before {
content: url("../images/common/nav_top.png"); }
header .sp_header nav .about a:before {
content: url("../images/common/nav_about.png"); }
header .sp_header nav .plan a:before {
content: url("../images/common/nav_plan.png"); }
header .sp_header nav .works a:before {
content: url("../images/common/nav_works.png"); }
header .sp_header nav .recruit a:before {
content: url("../images/common/nav_recruit.png"); }
header .sp_header nav .company a:before {
content: url("../images/common/nav_company.png"); }
#page_index {
min-width: 1080px; }
@media (max-width: 768px) {
#page_index {
min-width: 0; } }
#page_index article.main_slider {
height: 752px;
overflow: hidden;
position: relative;
border-bottom: 10px solid #23325e; }
@media (max-width: 768px) {
#page_index article.main_slider {
height: 200px; } }
#page_index article.main_slider .slider {
position: relative;
list-style-type: none;
margin: 0; }
#page_index article.main_slider li {
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 1920px !important;
height: 752px;
display: none; }
@media (max-width: 768px) {
#page_index article.main_slider li {
width: 100% !important;
height: 200px;
background-size: cover;
background-position: center; } }
#page_index article.main_slider li:nth-of-type(1) {
background-image: url("../images/index/slide1.jpg"); }
#page_index article.main_slider li:nth-of-type(2) {
background-image: url("../images/index/slide2.jpg"); }
#page_index article.main_slider li:nth-of-type(3) {
background-image: url("../images/index/slide3.jpg"); }
#page_index article.main_slider .text {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100; }
#page_index article.main_slider .text p {
font-family: "Hannari", serif;
color: #ffffff;
font-size: 4rem;
height: 100%;
width: 1080px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: column;
line-height: 1.5em;
text-shadow: 0 0 7px rgba(0, 0, 0, 0.5); }
@media (max-width: 768px) {
#page_index article.main_slider .text p {
width: auto;
max-width: 440px;
font-size: 1.6rem;
padding-left: 10px; } }
#page_index article.main_slider .text span {
font-size: 6.5rem; }
@media (max-width: 768px) {
#page_index article.main_slider .text span {
font-size: 2rem; } }
#page_index article.lead {
background-image: url("../images/index/lead.jpg");
background-position: center;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 425px;
line-height: 1.8em; }
@media (max-width: 768px) {
#page_index article.lead {
height: auto;
padding: 20px 10px;
font-size: 1.6rem;
background-image: url("../images/index/bg02.jpg"); } }
#page_index .title {
font-weight: normal;
color: #582b0c;
font-family: "Hannari", serif;
font-size: 4rem;
line-height: 1.5em;
margin: 0;
margin-bottom: 60px; }
@media (max-width: 768px) {
#page_index .title {
font-size: 2rem;
padding: 0 10px;
margin-bottom: 30px; } }
#page_index .title span {
background-image: url("../images/index/thought_border.png");
background-position: center bottom;
background-repeat: repeat-x;
padding-bottom: 0.1em; }
#page_index article.thought {
background-image: url("../images/index/deco_top.png"), url("../images/index/thought_left.png"), url("../images/index/thought_right.png"), url("../images/index/bg01.jpg");
background-position: top center, left 0 top 476px, right 0 top 156px, center;
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
padding-top: 100px;
text-align: center; }
@media (max-width: 768px) {
#page_index article.thought {
padding-top: 50px; } }
#page_index article.thought section {
max-width: 1080px;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
text-align: left; }
@media (max-width: 768px) {
#page_index article.thought section {
flex-direction: column;
padding: 0 10px; } }
#page_index article.thought section .photo {
margin: 0; }
@media (max-width: 768px) {
#page_index article.thought section .photo img {
width: 100%;
height: auto; } }
#page_index article.thought section dl {
flex: 1; }
#page_index article.thought section dt {
color: #582b0c;
font-family: "Hannari", serif;
font-weight: bold;
font-size: 2.6rem;
line-height: 1.5em;
margin-bottom: 32px;
display: flex;
align-items: center; }
@media (max-width: 768px) {
#page_index article.thought section dt {
flex-direction: column;
margin-bottom: 10px; } }
#page_index article.thought section dt:after {
margin-left: 10px; }
@media (max-width: 768px) {
#page_index article.thought section dt:after {
margin-left: 0;
margin-top: 10px; } }
#page_index article.thought section dt p {
margin: 0; }
#page_index article.thought section dd {
line-height: 1.8em;
margin: 0; }
#page_index article.thought section dd p {
margin: 0; }
#page_index article.thought .trust dl {
margin-right: 62px; }
@media (max-width: 768px) {
#page_index article.thought .trust dl {
margin-right: 0; } }
#page_index article.thought .trust dt:after {
content: url("../images/index/thought_trust_icon.png"); }
#page_index article.thought .service {
margin-top: 50px; }
#page_index article.thought .service dl {
order: 2; }
@media (max-width: 768px) {
#page_index article.thought .service dl {
order: 1; } }
#page_index article.thought .service .photo {
order: 1;
margin-right: 62px; }
@media (max-width: 768px) {
#page_index article.thought .service .photo {
order: 2;
margin-right: 0; } }
#page_index article.thought .service dt:after {
content: url("../images/index/thought_service_icon.png"); }
#page_index article.thought .link_button {
margin-top: 70px; }
@media (max-width: 768px) {
#page_index article.thought .link_button {
margin-top: 30px;
margin-bottom: 0; } }
#page_index article.reason {
text-align: center;
padding-top: 120px;
background-image: url("../images/index/bg01_bottom.png"), url("../images/index/reason_bg.png"), url("../images/index/bg02.jpg");
background-position: center top, right bottom, center;
background-repeat: no-repeat, no-repeat, repeat;
position: relative;
padding-bottom: 72px; }
@media (max-width: 768px) {
#page_index article.reason {
padding-bottom: 30px; } }
#page_index article.reason .title {
position: relative;
z-index: 2; }
#page_index article.reason:after {
position: absolute;
top: -150px;
right: 0;
content: url("../images/index/roller.png"); }
@media (max-width: 768px) {
#page_index article.reason:after {
display: none; } }
#page_index article.reason .reasons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
text-align: left; }
@media (max-width: 768px) {
#page_index article.reason .reasons {
display: block; } }
#page_index article.reason .reasons section {
width: 511px;
height: 229px;
display: flex;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
padding-left: 138px;
padding-right: 40px; }
@media (max-width: 768px) {
#page_index article.reason .reasons section {
padding: 0;
height: auto;
width: auto;
margin: 10px; } }
#page_index article.reason .reasons section:nth-of-type(1) {
background-image: url("../images/index/reason1.png"); }
@media (max-width: 768px) {
#page_index article.reason .reasons section:nth-of-type(1) {
background: none; } }
@media (max-width: 768px) {
#page_index article.reason .reasons section:nth-of-type(1) .subtitle {
background-color: #b6d1d1; } }
#page_index article.reason .reasons section:nth-of-type(2) {
background-image: url("../images/index/reason2.png");
height: 248px;
margin-top: 63px; }
@media (max-width: 768px) {
#page_index article.reason .reasons section:nth-of-type(2) {
background: none; } }
@media (max-width: 768px) {
#page_index article.reason .reasons section:nth-of-type(2) {
height: auto;
margin-top: 0; }
#page_index article.reason .reasons section:nth-of-type(2) .subtitle {
background-color: #e1d6b5; } }
#page_index article.reason .reasons section:nth-of-type(3) {
background-image: url("../images/index/reason3.png");
margin-top: -10px; }
@media (max-width: 768px) {
#page_index article.reason .reasons section:nth-of-type(3) {
background: none; } }
@media (max-width: 768px) {
#page_index article.reason .reasons section:nth-of-type(3) {
margin-top: 0; }
#page_index article.reason .reasons section:nth-of-type(3) .subtitle {
background-color: #e2b9bc; } }
#page_index article.reason .reasons section:nth-of-type(4) {
background-image: url("../images/index/reason4.png");
margin-top: 64px; }
@media (max-width: 768px) {
#page_index article.reason .reasons section:nth-of-type(4) {
background: none; } }
@media (max-width: 768px) {
#page_index article.reason .reasons section:nth-of-type(4) {
margin-top: 0; }
#page_index article.reason .reasons section:nth-of-type(4) .subtitle {
background-color: #d0ceca; } }
#page_index article.reason .reasons section:nth-of-type(5) {
background-image: url("../images/index/reason5.png"); }
@media (max-width: 768px) {
#page_index article.reason .reasons section:nth-of-type(5) {
background: none; } }
@media (max-width: 768px) {
#page_index article.reason .reasons section:nth-of-type(5) .subtitle {
background-color: #c3d2ae; } }
#page_index article.reason .reasons .subtitle {
font-family: "Hannari", serif;
font-size: 2.6rem;
color: #582b0c;
margin-top: 0; }
@media (max-width: 768px) {
#page_index article.reason .reasons .subtitle {
font-size: 2rem;
border-radius: 10px;
padding: 5px 10px 10px;
line-height: 1em;
margin-bottom: 0.5em; } }
#page_index article.reason .reasons p {
line-height: 1.8em;
margin: 0; }
@media (max-width: 768px) {
#page_index article.reason .reasons p {
font-size: 1.6rem; } }
#page_index article.works {
background-image: url("../images/index/works_top_left.png"), url("../images/index/works_top_right.png"), url("../images/index/bg01.jpg");
background-position: left 0 top -60px, right 0 top -60px, center;
background-repeat: no-repeat, no-repeat, repeat;
text-align: center;
padding-top: 70px; }
@media (max-width: 768px) {
#page_index article.works {
padding-top: 30px;
padding-bottom: 0; } }
#page_index article.works .title {
font-size: 2rem;
line-height: 2em; }
#page_index article.works .title span {
font-size: 4rem; }
#page_index article.works ul {
max-width: 1080px;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
list-style-type: none;
background-image: url("../images/index/works_border.png"), url("../images/index/human.png");
background-repeat: repeat-x, no-repeat;
background-position: center bottom, right 0 bottom 10px;
position: relative;
padding: 0; }
@media (max-width: 768px) {
#page_index article.works ul {
flex-direction: column;
align-items: center;
background-image: url("../images/index/works_border.png"); } }
#page_index article.works ul:after {
content: url("../images/index/hake.png");
position: absolute;
bottom: -460px;
left: -380px; }
@media (max-width: 768px) {
#page_index article.works ul:after {
display: none; } }
#page_index article.works ul li {
width: 270px;
margin-right: 70px; }
#page_index article.works ul li:nth-of-type(3n), #page_index article.works ul li:nth-last-of-type {
margin-right: 0; }
@media (max-width: 768px) {
#page_index article.works ul li {
margin-right: 0; } }
#page_index article.works ul .house_name {
color: #582b0c;
font-size: 2.6rem;
font-family: "Hannari", serif;
font-weight: bold;
margin: 0; }
#page_index article.works ul .location {
margin-top: 0.5em;
color: #000000; }
#page_index article.works ul a {
text-decoration: none; }
@media (max-width: 768px) {
#page_index article.works .link_button {
margin-bottom: 0; } }
#page_index article.plan {
text-align: center;
padding-top: 76px;
padding-bottom: 76px;
background-image: url("../images/index/bg01_bottom.png"), url("../images/index/plan_bg.jpg");
background-position: center top, center;
background-repeat: no-repeat, repeat; }
@media (max-width: 768px) {
#page_index article.plan {
padding-top: 30px; } }
#page_index article.plan .title {
padding-top: 70px; }
#page_index article.plan .plans {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
list-style-type: none;
padding: 0; }
@media (max-width: 768px) {
#page_index article.plan .plans {
display: block; } }
#page_index article.plan .plans li {
width: 320px; }
@media (max-width: 768px) {
#page_index article.plan .plans li {
width: auto; } }
#page_index article.plan .plans li:nth-of-type(1) dl {
background-image: url("../images/index/plan1.png"); }
#page_index article.plan .plans li:nth-of-type(2) dl {
background-image: url("../images/index/plan2.png"); }
#page_index article.plan .plans li:nth-of-type(3) dl {
background-image: url("../images/index/plan3.png"); }
#page_index article.plan .plans dl {
width: 100%;
height: 320px;
box-sizing: border-box;
padding-top: 70px; }
@media (max-width: 768px) {
#page_index article.plan .plans dl {
margin-bottom: 20px;
width: 320px;
margin-left: auto;
margin-right: auto; } }
#page_index article.plan .plans dl dt {
color: #582b0c;
background-image: url("../images/index/plan_border.png");
background-position: center bottom;
background-repeat: no-repeat;
padding-bottom: 22px; }
#page_index article.plan .plans dl dt .main {
margin: 0;
font-size: 4rem;
font-family: "Hannari", serif; }
#page_index article.plan .plans dl dt .sub {
margin: 0;
margin-top: 1em;
font-size: 1.4rem; }
#page_index article.plan .plans dl dd {
font-size: 2.6rem;
font-family: "Hannari", serif;
color: #582b0c;
line-height: 1.4em;
margin: 0;
margin-top: 22px; }
#page_index article.plan .plans .text {
text-align: left;
margin-top: 16px; }
@media (max-width: 768px) {
#page_index article.plan .plans .text {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0; } }
#page_index article.plan .plans .text p {
margin: 0;
line-height: 1.8em; }
@media (max-width: 768px) {
#page_index article.plan .link_button {
margin-bottom: 0; } }
#page_index article.recruit {
background-image: url("../images/index/recruit_bg.jpg");
background-position: center;
height: 650px; }
@media (max-width: 768px) {
#page_index article.recruit {
height: auto;
background-size: cover;
background-position: center;
padding-bottom: 20px; } }
#page_index article.recruit .content {
max-width: 1080px;
margin-left: auto;
margin-right: auto; }
#page_index article.recruit .title {
padding-top: 60px;
color: #ffffff; }
@media (max-width: 768px) {
#page_index article.recruit .title {
padding-top: 30px; } }
#page_index article.recruit .title span {
background-image: url("../images/index/recruit_border.png"); }
#page_index article.recruit .text {
color: #ffffff;
line-height: 2em; }
@media (max-width: 768px) {
#page_index article.recruit .text {
padding-left: 10px;
padding-right: 10px; } }
#page_index article.recruit .link {
margin-top: 50px; }
@media (max-width: 768px) {
#page_index article.recruit .link {
margin-left: 10px;
margin-right: 10px;
margin-top: 20px;
margin-bottom: 0; } }
#page_index article.recruit .link a {
width: 360px;
border: 3px solid #ffffff;
border-radius: 10px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-decoration: none;
padding: 1em 0;
font-family: "Hannari", serif;
font-size: 2.2rem; }
@media (max-width: 768px) {
#page_index article.recruit .link a {
width: auto; } }
#page_index article.recruit .link a:before {
content: url("../images/common/btn_arrow.png");
margin-right: 10px;
position: relative;
z-index: 3;
line-height: 1em; }
#page_index article.news {
background-image: url("../images/index/bg02.jpg");
padding: 60px 0; }
@media (max-width: 768px) {
#page_index article.news {
padding: 30px 0; } }
#page_index article.news .news_header {
max-width: 960px;
margin-left: auto;
margin-right: auto;
background-image: url("../images/index/news_title.png");
background-repeat: repeat-x;
background-position: center bottom;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 10px;
margin-bottom: 50px; }
@media (max-width: 768px) {
#page_index article.news .news_header {
display: block;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px; } }
#page_index article.news .news_header .news_title {
display: flex;
align-items: flex-end;
color: #582b0c;
font-family: "Hannari", serif; }
#page_index article.news .news_header .news_title h2 {
margin: 0;
font-size: 3.6rem; }
#page_index article.news .news_header .news_title p {
margin: 0;
font-size: 1.4rem; }
#page_index article.news .news_header .news_title p:before {
content: '-';
margin: 0 0.5em; }
#page_index article.news .news_header .link_button {
font-size: 1.6rem; }
@media (max-width: 768px) {
#page_index article.news .news_header .link_button {
margin-top: 10px; } }
#page_index article.news .news_header .link_button a {
padding: 0.1em 2em; }
#page_index article.news .news_header .link_button span {
background: none; }
#page_index article.news .news_list {
list-style-type: none;
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(2, 1fr);
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding: 0;
padding-bottom: 70px;
background-image: url("../images/index/news_border.png");
background-repeat: repeat-x;
background-position: center bottom;
margin-bottom: 60px; }
@media (max-width: 768px) {
#page_index article.news .news_list {
grid-template-columns: repeat(1, 1fr);
grid-gap: 20px;
margin-left: 10px;
margin-right: 10px; } }
#page_index article.news .news_list a {
text-decoration: none;
border: 3px solid #fff;
display: flex; }
#page_index article.news .news_list li {
background: #f7f7f7;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
#page_index article.news .news_list li .photo {
margin: 0;
width: 147px; }
@media (max-width: 768px) {
#page_index article.news .news_list li .photo {
width: 73px; } }
#page_index article.news .news_list li .photo img {
width: 100%;
height: auto; }
#page_index article.news .news_list li .content {
flex: 1;
padding: 18px;
padding-bottom: 0;
color: #000000; }
#page_index article.news .news_list li time {
display: block;
color: #582b0c;
border-bottom: 1px dotted #582b0c;
padding-bottom: 0.5em; }
#page_index article.news .news_list li p {
font-size: 1.8rem;
line-height: 1.5em; }
#page_index article.news .sns {
max-width: 960px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between; }
@media (max-width: 768px) {
#page_index article.news .sns {
display: block; } }
#page_index article.news .sns .facebook, #page_index article.news .sns .instagram {
width: 440px; }
@media (max-width: 768px) {
#page_index article.news .sns .facebook, #page_index article.news .sns .instagram {
width: 320px;
margin-left: auto;
margin-right: auto;
overflow: hidden; } }
#page_index article.news .sns .logo {
text-align: center;
height: 52px; }
@media (max-width: 768px) {
#page_index article.news .sns .logo {
height: auto; } }
@media (max-width: 768px) {
#page_index article.news .sns .pc {
display: none; } }
#page_index article.news .sns .sp {
display: none; }
@media (max-width: 768px) {
#page_index article.news .sns .sp {
display: block; } }
@media (max-width: 768px) {
#page_index article.news .sns .instagram iframe {
width: 320px !important;
height: 320px !important; } }
#contact_tel {
background-image: url("../images/common/contact_bg.jpg");
padding: 56px 0 98px;
text-align: center; }
@media (max-width: 768px) {
#contact_tel {
padding: 20px 0 60px; } }
#contact_tel .title {
font-size: 4rem;
color: #ffffff;
font-family: "Hannari", serif;
background-image: url("../images/common/contact_title.png");
background-repeat: repeat-x;
background-position: center bottom;
display: inline-block;
padding-bottom: 5px; }
@media (max-width: 768px) {
#contact_tel .title {
font-size: 2rem;
padding-left: 10px;
padding-right: 10px;
margin-top: 0; } }
#contact_tel .tel_box {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
background: #ffffff;
position: relative;
padding: 42px 42px 14px;
box-sizing: border-box; }
@media (max-width: 768px) {
#contact_tel .tel_box {
padding: 14px; } }
#contact_tel .tel_box:before {
content: '';
height: 15px;
width: 100%;
background-image: url("../images/common/contact_top.png");
position: absolute;
top: -15px;
left: 0; }
#contact_tel .tel_box:after {
content: '';
height: 42px;
width: 100%;
background-image: url("../images/common/contact_bottom.png");
position: absolute;
bottom: -42px;
left: 0; }
#contact_tel .tel_box .subtitle {
line-height: 1em;
font-family: "Hannari", serif;
color: #582b0c;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0; }
@media (max-width: 768px) {
#contact_tel .tel_box .subtitle {
font-size: 2rem; } }
#contact_tel .tel_box .subtitle:before {
content: url("../images/common/contact_tel.png"); }
@media (max-width: 768px) {
#contact_tel .tel_box .subtitle:before {
content: url("../images/common/contact_tel2.png"); } }
#contact_tel .tel_box .number {
font-family: "Hannari", serif;
background-image: url("../images/common/contact_border.png"), url("../images/common/contact_border.png");
background-position: center top, center bottom;
background-repeat: repeat-x, repeat-x;
display: flex;
align-items: center;
justify-content: center; }
@media (max-width: 768px) {
#contact_tel .tel_box .number {
display: block;
padding: 20px 0; } }
#contact_tel .tel_box .number dl {
display: flex;
align-items: center;
justify-content: center; }
#contact_tel .tel_box .number dt {
color: #ffffff;
font-size: 2.2rem;
height: 36px;
width: 80px;
margin-right: 10px; }
#contact_tel .tel_box .number dd {
font-size: 3.5em;
margin: 0;
vertical-align: middle; }
@media (max-width: 768px) {
#contact_tel .tel_box .number dd {
font-size: 2.2rem; } }
#contact_tel .tel_box .number dd a {
vertical-align: text-top;
text-decoration: none;
color: #582b0c; }
#contact_tel .tel_box .number .honten {
margin-right: 40px; }
@media (max-width: 768px) {
#contact_tel .tel_box .number .honten {
margin-right: 0; } }
#contact_tel .tel_box .number .honten dt {
background: url("../images/common/contact_honten.png"); }
#contact_tel .tel_box .number .eigyo dt {
background: url("../images/common/contact_eigyo.png"); }
#contact_tel .tel_box .link_button {
margin-bottom: 0; }
#contact_tel .tel_box .link_button a:before {
content: url("../images/common/mail.png"); }
footer {
background: url("../images/index/bg01.jpg");
padding-top: 52px;
border-top: 10px solid #23325e; }
@media (max-width: 768px) {
footer {
padding-top: 20px; } }
footer .logo {
text-align: center;
width: 185px;
margin-left: auto;
margin-right: auto; }
footer .logo .top {
margin: 0;
font-size: 1.2rem;
color: #ffffff;
background: #23325e;
padding: 0.1em 0; }
footer .logo .bottom {
font-size: 1.2rem; }
footer .logo .photo {
margin: 0.5em 0; }
footer .box1 {
display: flex;
justify-content: space-between;
align-items: flex-start;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
margin-top: 34px;
border-bottom: 1px solid #23325e;
margin-bottom: 20px; }
@media (max-width: 768px) {
footer .box1 {
display: block;
margin-top: 20px; } }
footer .box1 .address {
background: url("../images/common/address_bg.png");
border-radius: 5px;
display: flex;
align-items: center;
padding: 12px;
font-size: 1.4rem; }
@media (max-width: 768px) {
footer .box1 .address {
display: block; } }
footer .box1 .address dl {
display: flex;
align-items: center;
margin: 0;
margin-right: 1em; }
footer .box1 .address dl:last-of-type {
margin-right: 0; }
footer .box1 .address dt {
background: #ffffff;
border-radius: 5px;
text-align: center;
width: 80px;
padding: 1em 0; }
footer .box1 .address dd {
margin-left: 0.5em;
line-height: 1.4em; }
footer .box1 .address dd p {
margin: 0; }
footer .box1 .permit {
font-size: 1.4rem; }
@media (max-width: 768px) {
footer .box1 .permit {
text-align: center; } }
footer .box1 .logo2 {
margin: 0; }
@media (max-width: 768px) {
footer .box1 .logo2 {
text-align: center;
padding-bottom: 10px; } }
footer .box2 {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
margin-bottom: 46px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: "Hannari", serif;
color: #582b0c; }
@media (max-width: 768px) {
footer .box2 {
display: block;
margin-bottom: 20px; } }
footer .box2 .message {
font-size: 2rem;
font-weight: bold;
margin: 0; }
@media (max-width: 768px) {
footer .box2 .message {
margin: 0 10px; } }
footer .box2 .link_button {
margin: 0; }
footer .box2 .tel {
margin: 0;
display: flex;
align-items: flex-end; }
@media (max-width: 768px) {
footer .box2 .tel {
justify-content: center;
margin: 10px 0; } }
footer .box2 .tel dt {
color: #ffffff;
font-size: 2.2rem;
height: 36px;
width: 80px;
margin-right: 10px;
background: url("../images/common/contact_honten.png");
text-align: center; }
@media (max-width: 768px) {
footer .box2 .tel dt {
background: url("../images/common/contact_honten2.png");
height: 19px;
width: 40px;
font-size: 1.4rem; } }
footer .box2 .tel dd {
font-size: 3em;
margin: 0; }
@media (max-width: 768px) {
footer .box2 .tel dd {
font-size: 2rem; } }
footer .box2 .tel dd a {
vertical-align: text-top;
text-decoration: none;
color: #582b0c;
display: flex;
align-items: center; }
footer .box2 .tel dd a:before {
content: url("../images/common/contact_tel2.png"); }
@media (max-width: 768px) {
footer .box2 .tel dd a:before {
content: url("../images/common/contact_tel3.png");
margin-right: 5px; } }
footer .box2 .link_button {
margin: 0; }
@media (max-width: 768px) {
footer .box2 .link_button {
margin-left: 10px;
margin-right: 10px; } }
footer .box2 .link_button a {
padding-top: 0.5em;
padding-bottom: 0.5em; }
footer .box2 .link_button a:before {
content: url("../images/common/mail.png"); }
footer nav {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.4rem; }
@media (max-width: 768px) {
footer nav {
display: block;
margin: 0 10px;
border-top: 1px solid #23325e; } }
footer nav a {
color: #000000;
text-decoration: none; }
@media (max-width: 768px) {
footer nav a {
padding: 10px;
display: block; } }
footer nav p {
margin: 0; }
@media (max-width: 768px) {
footer nav p {
border-bottom: 1px solid #23325e; }
footer nav p:after {
display: none; } }
footer nav p:after {
content: '|';
margin: 0 0.5em; }
footer nav p:last-of-type:after {
display: none; }
footer .copyright {
background: #23325e;
text-align: center;
font-size: 1.2rem;
padding: 1em 0;
color: #ffffff;
margin-bottom: 0; }
#contact_button {
position: fixed;
right: 10px;
bottom: 10px;
background-color: #ffffff;
z-index: 9999;
border-radius: 5px;
background-image: url("../images/common/contact_border.png"), url("../images/common/contact_border.png");
background-position: center top, center bottom;
background-repeat: repeat-x, repeat-x;
font-family: "Hannari", serif;
color: #582b0c;
text-align: center;
padding: 16px 8px; }
@media (max-width: 768px) {
#contact_button {
display: none; } }
#contact_button .contact_title {
font-size: 1.8rem;
background-image: url("../images/common/contact_title2.png");
background-position: center bottom;
background-repeat: repeat-x, repeat-x;
margin: 0;
padding-bottom: 0.3em; }
#contact_button dl {
margin: 0;
display: flex;
align-items: flex-end;
justify-content: center; }
#contact_button dt {
width: 40px;
height: 19px;
color: #ffffff;
font-size: 1.4rem;
background-image: url("../images/common/contact_honten2.png"); }
#contact_button dd {
margin: 0;
margin-left: 0.3em; }
#contact_button dd a {
color: #582b0c;
text-decoration: none;
font-size: 2.2rem;
visibility: text-top;
display: flex;
align-items: center; }
#contact_button dd a:before {
margin-right: 0.1em;
content: url("../images/common/contact_tel3.png"); }
#contact_button .link_button {
font-size: 1.6rem;
margin-bottom: 0;
margin-top: 0.5em; }
#contact_button .link_button a {
padding: 0.2em 1em 0.5em; }
#contact_button .link_button a:before {
content: url("../images/common/mail2.png"); }
#contact_button .link_button span {
background: none;
padding: 0; }
#sub_page_header {
background-image: url("../images/common/sub_header.jpg");
background-position: center;
background-size: cover;
height: 377px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 10px solid #23325e;
overflow: hidden; }
@media (max-width: 768px) {
#sub_page_header {
height: 200px; } }
#sub_page_header .title {
font-family: "Hannari", serif;
color: #ffffff;
position: relative; }
#sub_page_header .title .main {
text-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
z-index: 2;
position: relative;
font-size: 5.6rem;
margin: 0;
font-weight: normal; }
@media (max-width: 768px) {
#sub_page_header .title .main {
font-size: 3rem; } }
#sub_page_header .title .sub {
position: absolute;
bottom: -40px;
right: -20px;
z-index: 1;
margin: 0;
font-family: "Rage Italic";
color: rgba(88, 43, 12, 0.2);
font-size: 4rem;
transform: rotate(-10deg); }
@media (max-width: 768px) {
#sub_page_header .title .sub {
bottom: -20px;
right: -10px;
font-size: 2rem; } }
.page_subtitle {
font-size: 3.6rem;
color: #582b0c;
text-align: center;
padding-bottom: 20px;
background-image: url("../images/common/subtitle_border.png");
background-position: center bottom;
background-repeat: repeat-x;
font-weight: normal;
font-family: "Hannari", serif; }
@media (max-width: 768px) {
.page_subtitle {
font-size: 2.2rem;
margin-left: 10px;
margin-right: 10px; } }
.page_subtitle2 {
font-size: 2.6rem;
color: #582b0c;
background-image: url("../images/common/subtitle2_border.png");
background-position: center bottom 20px;
background-repeat: repeat-x;
font-weight: normal;
display: flex;
align-items: center;
font-family: "Hannari", serif;
margin-bottom: 0.5em; }
.page_subtitle2:before {
content: url("../images/common/subtitle2_icon.png"); }
@media (max-width: 768px) {
.page_subtitle2 {
font-size: 2rem;
padding-bottom: 10px; }
.page_subtitle2:before {
content: url("../images/common/subtitle2_icon.png");
transform: scale(0.5);
width: 60px; } }
#page_about {
background: url("../images/index/bg01.jpg"); }
#page_about .history {
max-width: 1080px;
margin-left: auto;
margin-right: auto; }
@media (max-width: 768px) {
#page_about .history {
margin-left: 10px;
margin-right: 10px; } }
#page_about .history .message {
display: flex;
justify-content: space-between; }
@media (max-width: 768px) {
#page_about .history .message {
display: block; } }
#page_about .history .message .text {
flex: 1;
margin-right: 56px;
line-height: 1.8em; }
@media (max-width: 768px) {
#page_about .history .message .text {
margin-right: 0; } }
#page_about .history .message .photo {
margin: 0; }
#page_about .history .message .photo img {
width: 520px;
height: auto; }
@media (max-width: 768px) {
#page_about .history .message .photo img {
width: 100%; } }
#page_about .history .certificate .wrap {
display: flex;
justify-content: space-between; }
@media (max-width: 768px) {
#page_about .history .certificate .wrap {
display: block; } }
#page_about .history .certificate .photo {
margin: 0; }
#page_about .history .certificate .photo img {
width: 360px;
height: auto; }
@media (max-width: 768px) {
#page_about .history .certificate .photo img {
width: 100%; } }
#page_about .history .certificate .detail {
margin-top: 0;
background: url("../images/index/bg02.jpg");
border-radius: 5px;
border: 5px solid #ffffff;
padding: 12px 24px;
margin-right: 60px; }
@media (max-width: 768px) {
#page_about .history .certificate .detail {
margin-right: 0; } }
#page_about .history .certificate .detail > dt {
color: #582b0c;
font-size: 2rem;
font-family: "Hannari", serif;
border-bottom: 1px dotted #582b0c;
padding-bottom: 10px;
margin-bottom: 10px; }
#page_about .history .certificate .detail > dd {
margin: 0;
padding: 0; }
#page_about .history .certificate .item {
display: flex;
margin: 0.5em 0; }
@media (max-width: 768px) {
#page_about .history .certificate .item {
display: block; } }
#page_about .history .certificate .item > dt {
color: #582b0c;
width: 136px; }
@media (max-width: 768px) {
#page_about .history .certificate .item > dt {
width: auto; } }
#page_about .history .certificate .item > dd {
flex: 1;
margin: 0;
line-height: 1.5em; }
#page_about .history .communication {
padding: 40px;
border: 1px solid #582b0c;
border-radius: 10px;
text-align: center;
margin-top: 73px; }
@media (max-width: 768px) {
#page_about .history .communication {
padding: 10px;
margin-top: 30px; } }
#page_about .history .communication dt {
font-size: 2.6rem;
color: #582b0c;
background-image: url("../images/common/subtitle3_border.png");
background-position: center bottom;
background-repeat: repeat-x;
padding-bottom: 10px;
display: inline-block;
margin-bottom: 1em;
font-family: "Hannari", serif; }
@media (max-width: 768px) {
#page_about .history .communication dt {
font-size: 2rem; } }
#page_about .history .communication dd {
line-height: 1.8em;
margin: 0; }
#page_about .paint_type {
margin-top: 86px;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-bottom: 60px; }
@media (max-width: 768px) {
#page_about .paint_type {
margin-top: 40px;
margin-left: 10px;
margin-right: 10px; } }
#page_about .paint_type ul {
text-align: left;
margin: 0;
padding: 0;
list-style-type: none; }
#page_about .paint_type .photo {
margin: 0;
margin-left: 40px; }
@media (max-width: 768px) {
#page_about .paint_type .photo {
margin-left: 0;
margin-top: 10px; } }
#page_about .paint_type .photo img {
width: 520px;
height: auto; }
@media (max-width: 768px) {
#page_about .paint_type .photo img {
width: 100%; } }
#page_about .paint_type dl {
margin: 0;
flex: 1; }
#page_about .paint_type dt {
color: #582b0c;
font-size: 2.6rem;
margin-bottom: 1em;
font-family: "Hannari", serif; }
#page_about .paint_type dd {
margin: 0; }
#page_about .paint_type dd p {
margin: 0;
line-height: 1.8em; }
#page_about .paint_type li {
display: flex;
margin-bottom: 58px; }
@media (max-width: 768px) {
#page_about .paint_type li {
display: block; } }
#page_about .paint_type li:nth-of-type(2n) .photo {
order: 1;
margin-left: 0; }
#page_about .paint_type li:nth-of-type(2n) dl {
order: 2;
margin-left: 40px; }
@media (max-width: 768px) {
#page_about .paint_type li:nth-of-type(2n) dl {
margin-left: 0; } }
@media (max-width: 768px) {
#page_about .paint_type .link_button {
margin-left: 0;
margin-right: 0; } }
#sub_page_content {
background-image: url("../images/common/bg_img1.png"), url("../images/common/bg_img2.png");
background-repeat: no-repeat, no-repeat;
background-position: top 25% right 0, bottom 25% left 0; }
@media (max-width: 768px) {
#sub_page_content {
background: none; } }
#page_plan {
background-image: url("../images/index/bg01.jpg"); }
#page_plan .intro {
max-width: 1080px;
margin-left: auto;
margin-right: auto; }
@media (max-width: 768px) {
#page_plan .intro {
margin-left: 10px;
margin-right: 10px; } }
#page_plan .intro .message {
display: flex;
justify-content: space-between; }
@media (max-width: 768px) {
#page_plan .intro .message {
display: block; } }
#page_plan .intro .message .text {
flex: 1;
margin-right: 56px;
line-height: 1.8em; }
@media (max-width: 768px) {
#page_plan .intro .message .text {
margin-right: 0; } }
#page_plan .intro .message .photo {
margin: 0; }
#page_plan .intro .message .photo img {
width: 520px;
height: auto; }
@media (max-width: 768px) {
#page_plan .intro .message .photo img {
width: 100%; } }
#page_plan .plan {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
margin-top: 80px; }
#page_plan .plans {
display: flex;
justify-content: space-between;
list-style-type: none;
padding: 0; }
@media (max-width: 768px) {
#page_plan .plans {
display: block; } }
#page_plan .plans li {
width: 320px; }
@media (max-width: 768px) {
#page_plan .plans li {
width: auto; } }
#page_plan .plans li:nth-of-type(1) .popup {
background-image: url("../images/plan/plan1.png"); }
#page_plan .plans li:nth-of-type(2) .popup {
background-image: url("../images/plan/plan2.png"); }
#page_plan .plans li:nth-of-type(3) .popup {
background-image: url("../images/plan/plan3.png"); }
#page_plan .plans .popup {
text-align: center;
width: 100%;
height: 320px;
box-sizing: border-box;
padding-top: 70px; }
@media (max-width: 768px) {
#page_plan .plans .popup {
margin-bottom: 20px;
width: 320px;
margin-left: auto;
margin-right: auto; } }
#page_plan .plans .popup dt {
color: #582b0c;
background-image: url("../images/index/plan_border.png");
background-position: center bottom;
background-repeat: no-repeat;
padding-bottom: 22px; }
#page_plan .plans .popup dt .main {
margin: 0;
font-size: 4rem;
font-family: "Hannari", serif; }
#page_plan .plans .popup dt .sub {
margin: 0;
margin-top: 1em;
font-size: 1.4rem; }
#page_plan .plans .popup dd {
font-size: 2.6rem;
font-family: "Hannari", serif;
color: #582b0c;
line-height: 1.4em;
margin: 0;
margin-top: 22px; }
#page_plan .plans .text {
text-align: left;
margin-top: 16px; }
@media (max-width: 768px) {
#page_plan .plans .text {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0; } }
#page_plan .plans .text p {
margin: 0;
line-height: 1.8em; }
#page_plan .plans .detail {
margin-top: 0;
background: url("../images/index/bg02.jpg");
border-radius: 5px;
border: 5px solid #ffffff;
padding: 12px 24px;
margin-top: 10px; }
@media (max-width: 768px) {
#page_plan .plans .detail {
margin-left: 10px;
margin-right: 10px; } }
#page_plan .plans .detail > dt {
color: #582b0c;
font-size: 2rem;
font-family: "Hannari", serif;
border-bottom: 1px dotted #582b0c;
padding-bottom: 10px;
margin-bottom: 10px; }
#page_plan .plans .detail > dd {
margin: 0;
padding: 0; }
#page_plan .plans .item {
display: flex;
margin: 0.5em 0; }
@media (max-width: 768px) {
#page_plan .plans .item {
display: block; } }
#page_plan .plans .item > dt {
color: #582b0c;
width: 136px; }
@media (max-width: 768px) {
#page_plan .plans .item > dt {
width: auto; } }
#page_plan .plans .item > dd {
flex: 1;
margin: 0;
line-height: 1.5em; }
#page_plan .tool {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
text-align: center; }
@media (max-width: 768px) {
#page_plan .tool {
margin-left: 10px;
margin-right: 10px; } }
#page_plan .tool dl.item {
text-align: left;
margin-top: 0;
background: url("../images/index/bg02.jpg");
border-radius: 5px;
border: 5px solid #ffffff;
padding: 12px 24px;
margin-top: 10px;
margin-bottom: 40px; }
#page_plan .tool dl.item > dt {
color: #582b0c;
font-size: 2.6rem;
font-family: "Hannari", serif; }
#page_plan .tool dl.item > dd {
margin: 0;
padding: 0;
line-height: 1.5em; }
#page_plan .tool .caution {
text-align: left;
padding: 40px;
border: 1px solid #582b0c;
border-radius: 10px;
text-align: center;
margin-top: 73px; }
@media (max-width: 768px) {
#page_plan .tool .caution {
padding: 10px;
margin-top: 30px; } }
#page_plan .tool .caution dt {
font-size: 2.6rem;
color: #582b0c;
background-image: url("../images/common/subtitle3_border.png");
background-position: center bottom;
background-repeat: repeat-x;
padding-bottom: 10px;
display: inline-block;
margin-bottom: 1em;
font-family: "Hannari", serif; }
@media (max-width: 768px) {
#page_plan .tool .caution dt {
font-size: 2rem; } }
#page_plan .tool .caution dd {
line-height: 1.8em;
margin: 0; }
@media (max-width: 768px) {
#page_plan .tool .link_button {
margin-left: 0;
margin-right: 0; } }
#page_plan .timing {
margin-top: 86px;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
text-align: center; }
#page_plan .timing .text {
text-align: center;
line-height: 1.8em;
margin-bottom: 50px; }
@media (max-width: 768px) {
#page_plan .timing {
margin-top: 40px;
margin-left: 10px;
margin-right: 10px; } }
#page_plan .timing ul {
text-align: left;
margin: 0;
padding: 0;
list-style-type: none; }
#page_plan .timing .photo {
margin: 0;
margin-left: 40px; }
@media (max-width: 768px) {
#page_plan .timing .photo {
margin-left: 0;
margin-top: 10px; } }
#page_plan .timing .photo img {
width: 520px;
height: auto; }
@media (max-width: 768px) {
#page_plan .timing .photo img {
width: 100%; } }
#page_plan .timing dl {
margin: 0;
flex: 1; }
#page_plan .timing dt {
color: #582b0c;
font-size: 2.6rem;
margin-bottom: 1em;
font-family: "Hannari", serif; }
#page_plan .timing dd {
margin: 0; }
#page_plan .timing dd p {
margin: 0;
line-height: 1.8em; }
#page_plan .timing li {
display: flex;
margin-bottom: 58px; }
@media (max-width: 768px) {
#page_plan .timing li {
display: block; } }
#page_plan .timing li:nth-of-type(2n) .photo {
order: 1;
margin-left: 0; }
#page_plan .timing li:nth-of-type(2n) dl {
order: 2;
margin-left: 40px; }
@media (max-width: 768px) {
#page_plan .timing li:nth-of-type(2n) dl {
margin-left: 0; } }
#page_plan .flow {
text-align: left;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-bottom: 60px;
margin-top: 80px; }
#page_plan .flow .wrap {
display: flex;
justify-content: space-between; }
@media (max-width: 768px) {
#page_plan .flow .wrap {
display: block; } }
#page_plan .flow .text {
margin: 0;
flex: 1;
line-height: 1.5em; }
@media (max-width: 768px) {
#page_plan .flow .text {
margin: 30px 10px 0; } }
#page_plan .flow .step{}
#page_plan .flow .step .inner{}
#page_plan .flow .step .inner:after {
display: block;
content: " ";
clear: both;
}
#page_plan .flow .step .inner dl{
width: 360px;
float:left;
margin: 0 32px 0 0;
position: relative;
background-image: url("../images/plan/flow_border.png");
background-repeat: repeat-y;
background-position: center;
padding-bottom:50px;
}
#page_plan .flow .step .inner:last-of-type dl{padding-bottom:0px;}
#page_plan .flow .step .inner dl dt{
font-family: "rage italic";
font-size: 2rem;
color: #582b0c;
transform: rotate(-10deg);
margin: 0;
position: absolute;
top: -0.5em;
left: 0.5em;
}
#page_plan .flow .step .inner dl dd {
margin: 0;
background-image: url("../images/plan/flow_bg.png");
padding: 13px 32px 18px;
border-radius: 10px;
color: #ffffff;
font-family: "Hannari", serif;
font-size: 2.6rem;
line-height: 1em;
display: flex;
align-items: center;
}
#page_plan .flow .step .inner:nth-of-type(1) dl dd:before {content: url("../images/plan/step1.png"); }
#page_plan .flow .step .inner:nth-of-type(2) dl dd:before {content: url("../images/plan/step2.png"); }
#page_plan .flow .step .inner:nth-of-type(3) dl dd:before {content: url("../images/plan/step3.png"); }
#page_plan .flow .step .inner:nth-of-type(4) dl dd:before {content: url("../images/plan/step4.png"); }
#page_plan .flow .step .inner dl dd:before {
width: 33px;
display: flex;
justify-content: center;
}
#page_plan .flow .step .inner p.text{
width:680px;
float: right;
}
@media (max-width: 768px) {
#page_plan .flow .step .inner{}
#page_plan .flow .step .inner dl{
width: auto;
float:none;
margin:30px 10px 0 10px;
background-image: none;
padding-bottom:0px;
}
#page_plan .flow .step .inner:first-of-type dl{margin:0px 10px 0 10px;}
#page_plan .flow .step .inner:last-of-type dl{padding-bottom:0px;}
#page_plan .flow .step .inner dl dd {
padding: 13px 15px 18px;
font-size: 2rem;
}
#page_plan .flow .step .inner p.text{
width: auto;
float:none;
margin: 20px 10px 0;
}
}
#page_works {
background-image: url("../images/index/bg01.jpg"); }
#page_works .intro {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
position: relative; }
#page_works .intro:after {
content: url("../images/works/point_photo.png");
right: -46px;
bottom: -46px;
position: absolute; }
@media (max-width: 768px) {
#page_works .intro:after {
display: none; } }
@media (max-width: 768px) {
#page_works .intro {
margin-left: 10px;
margin-right: 10px; } }
#page_works .intro dl.item {
text-align: left;
margin-top: 0;
background: url("../images/index/bg02.jpg");
border-radius: 5px;
border: 5px solid #ffffff;
padding: 12px 24px;
margin-top: 10px;
margin-bottom: 40px;
display: flex; }
@media (max-width: 768px) {
#page_works .intro dl.item {
display: block;
padding: 10px; } }
#page_works .intro dl.item > dt {
width: 70px;
height: 75px;
font-family: "Hannari", serif;
background: url("../images/works/point.png");
text-align: center;
color: #ffffff;
font-size: 1.4rem;
box-sizing: border-box;
padding-top: 5px; }
#page_works .intro dl.item > dt span {
font-size: 3rem;
line-height: 1em; }
#page_works .intro dl.item > dd {
margin: 0; }
@media (max-width: 768px) {
#page_works .intro dl.item > dd {
margin-top: -10px; } }
#page_works .intro .detail {
margin: 0;
padding: 0;
line-height: 1.5em;
flex: 1;
margin-left: 10px;
margin-top: 20px; }
#page_works .intro .detail > dt {
color: #582b0c;
font-size: 2.6rem;
font-family: "Hannari", serif; }
@media (max-width: 768px) {
#page_works .intro .detail > dt {
font-size: 2rem;
line-height: 1.4em; } }
#page_works .intro .detail > dd {
margin: 0;
margin-top: 1em;
line-height: 1.8em; }
#page_works .intro .detail > dd p {
margin: 0; }
#page_works .flow {
text-align: left;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-bottom: 60px;
margin-top: 80px; }
#page_works .flow .wrap {
display: flex;
justify-content: space-between; }
@media (max-width: 768px) {
#page_works .flow .wrap {
display: block; } }
#page_works .flow .text {
margin: 0;
flex: 1;
line-height: 1.5em; }
@media (max-width: 768px) {
#page_works .flow .text {
margin: 30px 10px 0; } }
#page_works .flow .step{}
#page_works .flow .step .inner{}
#page_works .flow .step .inner:after {
display: block;
content: " ";
clear: both;
}
#page_works .flow .step .inner dl{
width: 360px;
float:left;
margin: 0 32px 0 0;
position: relative;
background-image: url("../images/plan/flow_border.png");
background-repeat: repeat-y;
background-position: center;
padding-bottom:50px;
}
#page_works .flow .step .inner:last-of-type dl{padding-bottom:0px;}
#page_works .flow .step .inner dl dt{
font-family: "rage italic";
font-size: 2rem;
color: #582b0c;
transform: rotate(-10deg);
margin: 0;
position: absolute;
top: -0.5em;
left: 0.5em;
}
#page_works .flow .step .inner dl dd {
margin: 0;
background-image: url("../images/plan/flow_bg.png");
padding: 13px 32px 18px;
border-radius: 10px;
color: #ffffff;
font-family: "Hannari", serif;
font-size: 2.6rem;
line-height: 1em;
text-align: center;
}
#page_works .flow .step .inner dl dd.start {
background-image: url("../images/index/bg01.jpg");
color: #582b0c;
}
#page_works .flow .step .inner dl dd.after {background-image: url("../images/works/after.png");}
#page_works .flow .step .inner dl dd:before {
width: 33px;
display: flex;
justify-content: center;
}
#page_works .flow .step .inner p.text{
width:680px;
float: right;
}
@media (max-width: 768px) {
#page_works .flow .step .inner{}
#page_works .flow .step .inner dl{
width: auto;
float:none;
margin:30px 10px 0 10px;
background-image: none;
padding-bottom:0px;
}
#page_works .flow .step .inner:first-of-type dl{margin:0px 10px 0 10px;}
#page_works .flow .step .inner:last-of-type dl{padding-bottom:0px;}
#page_works .flow .step .inner dl dd {
padding: 13px 15px 18px;
font-size: 2rem;
}
#page_works .flow .step .inner p.text{
width: auto;
float:none;
margin: 20px 10px 0;
}
}
#page_works .works {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-bottom: 60px; }
#page_works .works ul {
margin: 0;
padding: 0;
list-style-type: none; }
#page_works .works li {
display: flex;
justify-content: space-between;
padding-bottom: 54px;
margin-bottom: 54px;
border-bottom: 1px dotted #582b0c; }
@media (max-width: 768px) {
#page_works .works li {
display: block;
margin-left: 10px;
margin-right: 10px; } }
#page_works .works li:after {
content: url("../images/works/arrow.png");
order: 2;
margin-top: 300px; }
@media (max-width: 768px) {
#page_works .works li:after {
display: none; } }
#page_works .works .wrap {
width: 360px;
order: 1; }
@media (max-width: 768px) {
#page_works .works .wrap {
width: auto; } }
#page_works .works .detail {
margin-top: 0;
background: url("../images/index/bg02.jpg");
border-radius: 5px;
border: 5px solid #ffffff;
padding: 12px 24px; }
#page_works .works .detail > dt {
color: #582b0c;
font-size: 2rem;
font-family: "Hannari", serif;
border-bottom: 1px dotted #582b0c;
padding-bottom: 10px;
margin-bottom: 10px; }
#page_works .works .detail > dd {
margin: 0;
padding: 0; }
#page_works .works .item {
display: flex;
margin: 0.5em 0; }
@media (max-width: 768px) {
#page_works .works .item {
display: block; } }
#page_works .works .item > dt {
color: #582b0c;
width: 136px; }
@media (max-width: 768px) {
#page_works .works .item > dt {
width: auto; } }
#page_works .works .item > dd {
flex: 1;
margin: 0;
line-height: 1.5em; }
#page_works .works .before {
position: relative;
margin-top: 30px; }
#page_works .works .before .text {
position: absolute;
margin: 0;
font-size: 5.6rem;
color: #c9c1b5;
transform: rotate(-10deg);
top: -0.5em;
right: 0;
z-index:9999;
font-family: "rage italic"; }
#page_works .works .before .photo {
margin: 0; }
#page_works .works .before .photo img {
width: 100%;
height: auto; }
#page_works .works .after {
order: 3;
position: relative;
width: 600px; }
@media (max-width: 768px) {
#page_works .works .after {
width: auto;
margin-top: 40px; } }
#page_works .works .after .text {
position: absolute;
margin: 0;
font-size: 5.6rem;
color: #ff99a1;
transform: rotate(-10deg);
top: -0.5em;
right: 0;
z-index:9999;
font-family: "rage italic"; }
#page_works .works .after .photo {
margin: 0; }
#page_works .works .after .photo img {
width: 100%;
height: auto; }
#page_recruit {
background-image: url("../images/index/bg01.jpg"); }
#page_recruit .intro {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
position: relative; }
#page_recruit .intro .wrap {
display: flex;
justify-content: space-between; }
@media (max-width: 768px) {
#page_recruit .intro .wrap {
display: block; } }
#page_recruit .intro .left {
width: 510px; }
@media (max-width: 768px) {
#page_recruit .intro .left {
width: auto; } }
#page_recruit .intro .left .popup {
display: flex;
justify-content: center;
align-items: center; }
#page_recruit .intro .left .popup p {
background-image: url("../images/recruit/popup1.png");
width: 110px;
height: 114px;
margin-right: 38px;
text-align: center;
color: #ffffff;
font-family: "Hannari", serif;
font-size: 2.5rem;
box-sizing: border-box;
padding-top: 15px; }
@media (max-width: 768px) {
#page_recruit .intro .left .popup p {
margin-right: 10px;
width: 90px;
height: 93px;
background-size: cover;
font-size: 2rem;
margin-top: 0; } }
#page_recruit .intro .left .popup p:nth-of-type(2n) {
background-image: url("../images/recruit/popup2.png"); }
#page_recruit .intro .left .popup p:last-of-type {
margin-right: 0; }
@media (max-width: 768px) {
#page_recruit .intro .left .text {
margin-left: 10px;
margin-right: 10px; } }
#page_recruit .intro .left .text p {
margin: 0;
line-height: 1.8em; }
#page_recruit .intro .right {
width: 520px; }
@media (max-width: 768px) {
#page_recruit .intro .right {
width: auto;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px; } }
#page_recruit .intro .right img {
width: 100%;
height: auto; }
#page_recruit .intro .right .top {
margin: 0; }
#page_recruit .intro .right .bottom {
margin-top: 20px;
display: flex;
justify-content: space-between; }
@media (max-width: 768px) {
#page_recruit .intro .right .bottom {
display: block;
margin-top: 0; } }
#page_recruit .intro .right .bottom p {
margin: 0;
width: 250px; }
@media (max-width: 768px) {
#page_recruit .intro .right .bottom p {
width: 100%;
margin-top: 10px; } }
#page_recruit .welcome {
margin-top: 0;
background: url("../images/index/bg02.jpg");
border-radius: 5px;
border: 5px solid #ffffff;
padding: 24px;
text-align: center;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
margin-top: 50px; }
#page_recruit .welcome .title {
display: inline-block;
color: #582b0c;
font-size: 2.6rem;
font-family: "Hannari", serif;
padding-bottom: 10px;
background-image: url("../images/recruit/border.png");
background-repeat: repeat-x;
background-position: center bottom;
margin: 0; }
#page_recruit .welcome ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
margin-left: 38px;
margin-right: 38px; }
@media (max-width: 768px) {
#page_recruit .welcome ul {
display: block;
margin: 0; } }
#page_recruit .welcome li {
font-family: "Hannari", serif;
font-size: 2.4rem;
color: #582b0c;
width: 30%;
text-align: left;
display: flex;
align-items: center;
margin-bottom: 10px; }
@media (max-width: 768px) {
#page_recruit .welcome li {
width: auto; } }
#page_recruit .welcome li:nth-of-type(3n) {
width: 40%; }
@media (max-width: 768px) {
#page_recruit .welcome li:nth-of-type(3n) {
width: auto; } }
#page_recruit .welcome li:before {
content: url("../images/recruit/check.png");
margin-right: 5px; }
#page_recruit .welcome li:nth-of-type(7) {
width: 40%;
margin-left: 60%; }
@media (max-width: 768px) {
#page_recruit .welcome li:nth-of-type(7) {
width: auto;
margin-left: 0; } }
#page_recruit .outline {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-bottom: 60px;
line-height: 1.5em; }
#page_recruit .outline dl {
display: flex;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px dotted #582b0c; }
@media (max-width: 768px) {
#page_recruit .outline dl {
display: block;
margin-left: 10px;
margin-right: 10px; } }
#page_recruit .outline dt {
width: 155px;
color: #582b0c; }
@media (max-width: 768px) {
#page_recruit .outline dt {
width: auto; } }
#page_recruit .outline dd {
margin: 0; }
#page_company {
background-image: url("../images/index/bg01.jpg"); }
#page_company .outline {
max-width: 1080px;
margin-left: auto;
margin-right: auto; }
#page_company .outline .wrap {
display: flex;
justify-content: space-between; }
@media (max-width: 768px) {
#page_company .outline .wrap {
display: block; } }
#page_company .outline .list {
width: 480px; }
@media (max-width: 768px) {
#page_company .outline .list {
width: auto; } }
#page_company .outline dl {
display: flex;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px dotted #582b0c;
line-height: 1.5em; }
@media (max-width: 768px) {
#page_company .outline dl {
display: block;
margin-left: 10px;
margin-right: 10px; } }
#page_company .outline dt {
width: 155px;
color: #582b0c; }
@media (max-width: 768px) {
#page_company .outline dt {
width: auto; } }
#page_company .outline dd {
margin: 0; }
#page_company .outline dd p {
margin: 0; }
#page_company .outline .photo {
margin: 0;
width: 540px; }
@media (max-width: 768px) {
#page_company .outline .photo {
width: auto; } }
#page_company .outline .photo img {
width: 100%;
height: auto; }
#page_company .outline .map {
margin-top: 56px; }
#page_company .outline iframe {
width: 100%;
height: 375px;
border: none; }
@media (max-width: 768px) {
#page_company .outline iframe {
height: 200px; } }
#page_company .outline .eigyo {
margin-top: 80px;
padding-bottom: 80px; }
#page_company .outline .eigyo .list {
width: auto; }
#page_news {
background-image: url("../images/index/bg01.jpg"); }
#page_news .news {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-bottom: 60px;
padding-top: 60px; }
#page_news .news_header {
max-width: 960px;
margin-left: auto;
margin-right: auto;
background-image: url("../images/index/news_title.png");
background-repeat: repeat-x;
background-position: center bottom;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 10px;
margin-bottom: 50px; }
@media (max-width: 768px) {
#page_news .news_header {
display: block;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px; } }
#page_news .news_header .news_title {
display: flex;
align-items: flex-end;
color: #582b0c;
font-family: "Hannari", serif; }
#page_news .news_header .news_title h2 {
margin: 0;
font-size: 3.6rem; }
#page_news .news_header .news_title p {
margin: 0;
font-size: 1.4rem; }
#page_news .news_header .news_title p:before {
content: '-';
margin: 0 0.5em; }
#page_news .news_header .link_button {
font-size: 1.6rem; }
@media (max-width: 768px) {
#page_news .news_header .link_button {
margin-top: 10px; } }
#page_news .news_header .link_button a {
padding: 0.1em 2em; }
#page_news .news_header .link_button span {
background: none; }
#page_news .news_list {
list-style-type: none;
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(2, 1fr);
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding: 0;
padding-bottom: 70px;
background-image: url("../images/index/news_border.png");
background-repeat: repeat-x;
background-position: center bottom; }
@media (max-width: 768px) {
#page_news .news_list {
grid-template-columns: repeat(1, 1fr);
grid-gap: 20px;
margin-left: 10px;
margin-right: 10px; } }
#page_news .news_list a {
text-decoration: none;
border: 3px solid #fff;
display: flex; }
#page_news .news_list li {
background: #f7f7f7;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
#page_news .news_list li .photo {
margin: 0;
width: 147px; }
@media (max-width: 768px) {
#page_news .news_list li .photo {
width: 73px; } }
#page_news .news_list li .photo img {
width: 100%;
height: auto; }
#page_news .news_list li .content {
flex: 1;
padding: 18px;
padding-bottom: 0;
color: #000000; }
#page_news .news_list li time {
display: block;
color: #582b0c;
border-bottom: 1px dotted #582b0c;
padding-bottom: 0.5em; }
#page_news .news_list li p {
font-size: 1.8rem;
line-height: 1.5em; }
#page_contact {
background-image: url("../images/index/bg01.jpg"); }
#page_contact #sub_page_content {
padding: 60px 0; }
#page_contact .intro {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
background: url("../images/index/bg02.jpg");
border-radius: 5px;
border: 5px solid #ffffff;
padding: 12px 24px;
text-align: center;
box-sizing: border-box;
line-height: 1.8em; }
#page_privacy {
background-image: url("../images/index/bg01.jpg"); }
#page_privacy #sub_page_content {
padding: 60px 0; }
#page_privacy section {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px; }
#page_privacy .text {
line-height: 1.5em; }
@media (max-width: 768px) {
#page_privacy .text {
margin-left: 10px;
margin-right: 10px; } }
#page_privacy ul {
line-height: 1.5em;
margin-left: 0;
padding-left: 1em; }
@media (max-width: 768px) {
#page_privacy ul {
margin-left: 10px;
margin-right: 10px; } }
#page_sitemap {
background-image: url("../images/index/bg01.jpg"); }
#page_sitemap #sub_page_content {
padding: 60px 0; }
#page_sitemap ul {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
@media (max-width: 768px) {
#page_sitemap ul {
display: block;
margin-left: 10px;
margin-right: 10px; } }
#page_sitemap li {
width: 48%;
margin-bottom: 20px; }
@media (max-width: 768px) {
#page_sitemap li {
width: 100%; } }
#page_sitemap li a {
border: 1px solid #582b0c;
color: #582b0c;
font-size: 2rem;
display: block;
padding: 15px;
text-decoration: none;
background: #ffffff; }
#page_sitemap li a:before {
content: '>';
margin-right: 0.5em; }
/* ’Ç‹L
--------------------------------------------*/
#page_contact .form {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
margin-top: 60px; }
#page_contact .form dl {
margin: 0;
padding: 0;
display: flex;
align-items: flex-start;
border-top: 1px solid #582b0c;
padding: 20px;
background: #ffffff; }
@media (max-width: 768px) {
#page_contact .form dl {
display: block; } }
#page_contact .form dl:last-of-type {
border-bottom: 1px solid #582b0c; }
#page_contact .form dt {
width: 250px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
text-align: center; }
@media (max-width: 768px) {
#page_contact .form dt {
width: auto; } }
#page_contact .form dt .title {
flex: 1;
margin: 0;
line-height: 1.5em;
margin-right: 10px; }
@media (max-width: 768px) {
#page_contact .form dt .title {
text-align: left; } }
#page_contact .form dt .type {
margin: 0;
width: 60px;
background: #000000;
color: #ffffff;
padding: 5px 0; }
#page_contact .form dt .type span {
font-size: 1rem; }
#page_contact .form dt .type.required {
background: #ff0000; }
#page_contact .form dd {
margin: 0;
flex: 1;
margin-left: 20px; }
@media (max-width: 768px) {
#page_contact .form dd {
margin-left: 0;
margin-top: 10px; } }
#page_contact .form input[type="text"], #page_contact .form input[type="email"], #page_contact .form input[type="number"], #page_contact .form input[type="tel"], #page_contact .form textarea {
padding: 5px;
background: #f7f7f7;
box-sizing: border-box;
border: none;
width: 100%; }
#page_contact .form .zip, #page_contact .form .tel {
display: flex;
align-items: center; }
#page_contact .form .zip input, #page_contact .form .tel input {
width: 100px; }
@media (max-width: 768px) {
#page_contact .form .zip input, #page_contact .form .tel input {
width: 60px; } }
#page_contact .form .zip span, #page_contact .form .tel span {
margin: 0 0.5em; }
#page_contact .form textarea {
height: 10em; }
#page_contact .form .privacy {
align-items: center; }
#page_contact .form .privacy input[type="checkbox"] {
width: 1.5em;
height: 1.5em;
margin-right: 5px; }
#page_contact .form .privacy label {
display: flex;
align-items: center;
cursor: pointer; }
.errBox {
margin:0 auto;
border:#ff0000 solid 3px;
padding:20px;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
text-align: center;
box-sizing: border-box;
line-height: 1.8em;
}
#page_contact dd.radiobtn,
#page_contact .response dd {padding: 5px 0px;}
#page_contact dd.radiobtn label{ margin-right:10px;}
#page_contact .form .submit_button {
text-align: center;
margin-top: 30px;
}
#page_contact .form .submit_button input {
cursor: pointer;
background: #ffffff;
background: #582b0c;
color: #ffffff;
font-weight: bold;
font-size: 2rem;
padding: 10px 30px;
border: none;
}
#page_privacy .text.date{ text-align:right;}
#page_works .works .before .photo,
#page_works .works .after .photo{
overflow: hidden;
position: relative;
padding-top: 65%;
display: block;
z-index:0;
border-radius: 20px;
}
#page_works .works .before .photo img,
#page_works .works .after .photo img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
ul.pagenation {
margin: 30px auto 0;
text-align: center;
letter-spacing: 0;
width:auto;
min-width: 0;
border:none;
padding: 0 0 50px 0;
background:none;
font-size: 1.4rem;
}
ul.pagenation li{
width:40px;
height:40px;
display: inline-block;
margin:5px;
line-height:40px;
border-bottom:none;
padding:0px;
background:none;
}
ul.pagenation li.current span{
width:40px;
height:40px;
display:block;
color: #fff;
background: #23325e;
border:#23325e solid 1px;
font-weight: bold;
text-decoration: none;
float: none;
}
ul.pagenation li a{
width:40px;
height:40px;
display:block;
color: #23325e;
background: #fff;
border:#23325e solid 1px;
text-decoration: none;
float: none;
}
ul.pagenation li a:hover {
color: #fff;
background: #23325e;
text-decoration: none;
}
@media (max-width: 768px) {
.errBox {
padding:10px 20px;
margin:0 20px;
}
#page_contact dd.radiobtn,
#page_contact .response dd {padding:0px;}
#page_contact dd.radiobtn label{
margin:5px 0;
display:block;
}
}
/*# sourceMappingURL=style.css.map */