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

/* 基本色 */
:root {
	--main-color: #EE7000;
	--accent-color: #BF6A7A;
	--dark-main-color: #2B5566;
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
}


body {
	font-family: "Mplus 1p", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #555555;
	letter-spacing: 0.25em;
	line-height: 2;
}


h1 {
    font-size: 36px;
    font-weight: 400;
    color: #a14c00;
    text-align: center;
    line-height: 1;
    margin-bottom: 60px;
}

/* --------------------------------- header ----------------------------------- */
header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background-color: #ee7000;
    line-height: 0;
}

header img {
    margin: 8px 0px 8px 10px;
    height: 45px;
}

.head ul {
    margin: 0;
    padding: 0;
    line-height: 1;
    letter-spacing: normal;
}

.head a {
    display: block;
    padding: 15px 10px 15px 10px;
    text-decoration: none;
    color: #ffffff;
}

.head a:hover {
    background-color: rgba(0,0,0,0.1);
}

@media(max-width: 767px) {
    header .container_s {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .head {
        display: none;
    }
    
    .headB {
        margin-right: 10px;
        padding: 0;
        border: none;
        outline: none;
        background: none;
        opacity: 0.9;
        font-size: 28px;
        cursor: pointer;
        color: #ffffff;
    }
    
    .headB:hover {
        opacity: 0.5;
    }
}

@media (min-width: 768px) {
    header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .head {
        display: block !important;
    }
    
    .head ul {
        display: flex;
    }
    
    .headB {
        display: none;
    }
}

/* --------------------------------- conA ----------------------------------- */
.conA {
    padding: 160px 0 100px 0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fef6db), color-stop(0.00, #fff));
	background: -webkit-linear-gradient(#fff, #fef6db);
	background: -moz-linear-gradient(#fff, #fef6db);
	background: -o-linear-gradient(#fff, #fef6db);
	background: -ms-linear-gradient(#fff, #fef6db);
	background: linear-gradient(#fff, #fef6db);
	text-align: center;
}

.conA .container {
    padding: 0 10px 0 10px;
	color: #614c3f;
}

.conA .container:first-child {
    margin-bottom: 80px;
}

.conA h1 {
	font-size: 5vw;
	font-weight: normal;
	margin-left: 0.5em;
    margin-bottom: 26px;
}

.conA img {
    width: 82%;
}

.conA h2 {
    margin-bottom: 30px;
	font-size: 9vw;
	font-weight: 400;
	letter-spacing: normal;
    line-height: 1.5;
}

.conA p {
	font-size: 16px;
}

@media (min-width: 768px){
    .conA h1 {
        font-size: 24px;
    }
    
    .conA h2 {
        font-size: 36px;
    }
    
    .conA img {
        width: 360px;
    }
}

/* --------------------------------- conB ----------------------------------- */
.conB {
    padding: 100px 0 100px 0;
}

.conB .container {
    padding: 0 10px 0 10px;
    text-align: center;
}

.conB p {
    margin-bottom: 40px;
    font-size: 16px;
}

.conB .container_chara p {
    margin: 0;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    text-align: justify;
}

.conB .space {
    letter-spacing: normal;
}

.conB h3 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #ee7000;
    line-height: 1;
}

.conB img {
    margin-bottom: 10px;
    border-radius: 50%;
    height: 220px;
    width: 220px;
}

.conB .kakeru {
    margin-bottom: 20px;
    font-size: 72px;
    color: #EE7000;
    font-weight: 100;
    line-height: 1;
}

.conB a {
    display: inline-block;
    margin-top: 60px;
    padding: 10px 30px;
    border-radius: 6px;
    background-color: #ee7000;
    background-color: var(--main-color);
    color: #FFFFFF;
    color: var(--text-bright-color);
    font-size: 16px;
    text-decoration: none;
}

.conB a:hover {
    background-image: linear-gradient(
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.2)
    )
}

@media (min-width: 768px) {
    .conB .container_chara {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        align-self: flex-start;
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .conB h3:last-of-type {
        letter-spacing: normal;
    }
    
    .conB img {
        height: 200px;
        width: 200px;
    }
    
    .conB .container_chara p {
        padding-left: 5px;
        padding-right: 5px;
        width: 200px;
    }
    
    .conB .container_chara .kakeru {
        padding-top: 100px;
    }
} 

@media (min-width: 835px) {
    .conB h3:last-of-type {
        letter-spacing: 0.2em;
    }
    
    .conB img {
        height: 220px;
        width: 220px;
    }
    
    .conB .container_chara p {
        width: 220px;
    }
    
    .conB .container_chara .kakeru {
        padding-top: 110px;
    }
    
}

/* --------------------------------- conC ----------------------------------- */
.conC {
    padding: 100px 0 100px 0;
    background-color: #fef6db;
}

.conC .container {
    padding: 0 10px 0 10px;
    text-align: center;
}

.conC ul {
    margin-left: auto;
    margin-right: auto;
    max-width: 980px;
    list-style: none;
    text-align: left;
    display: inline-block;
}

.conC li {
    margin-bottom: 20px;
}

.conC li:last-child {
    margin-bottom: 0;
}

.conC li span {
    color: #ee7000;
    letter-spacing: normal;
}

.conC li span.date {
    color: #555555;
}

.conC a {
    text-decoration: none;
    color: #555555;
}

.conC a:hover {
    color: #ee7000;
}

@media (min-width: 768px) {
    
    .conC li br {
        display: none;
    }
    
    .conC li {
        margin-bottom: 0;
    }
}

/* --------------------------------- aboutA ----------------------------------- */
.aboutA {
    padding: 160px 0 0 0;
	text-align: left;
}

.aboutA .container {
    padding: 0 10px 0 10px;
}

.aboutA h2 {
    font-size: 24px;
    color: #fd564d;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 30px;
    line-height: 1;
}

.aboutA h3 {
    padding: 15px;
    background-color: #fd564d;
    text-align: center;
    line-height: 1;
    font-size: 23px;
    font-weight: 400;
    color: #ffffff;
    border-radius:8px 8px 0px 0px;
    -moz-border-radius:8px 8px 0px 0px;
    -webkit-border-radius:8px 8px 0px 0px;
}

.aboutA .des {
    padding: 15px;
    border: #fd564d solid 1px;
    border-radius:0px 0px 8px 8px;
    -moz-border-radius:0px 0px 8px 8px;
    -webkit-border-radius:0px 0px 8px 8px;
}

.aboutA .tri {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 44px 36px 0 36px;
    border-color: #fd564d transparent transparent transparent;
}

.aboutA .sec {
    margin-top: 60px;
    margin-bottom: 100px;
}

.aboutA .sec span {
    color: #fd564d;
}

.aboutA h4 {
    display: inline-block;
    background-color: #fd564d;
    padding: 16px;
    line-height: 1;
    color: #ffffff;
}

.aboutA .thi {
    margin-top: 16px;
    margin-bottom: 60px;
}

.aboutA .thi:last-child {
    margin-bottom: 100px;
}

@media (min-width: 768px) {
    .aboutA .container {
        max-width: 700px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 767px) {
    .aboutA h1, .aboutA h2, .aboutA h3, .aboutA h4 {
        line-height: 1.3;
    }
}

/* --------------------------------- aboutB ----------------------------------- */
.aboutB {
    padding: 100px 0 25px 0;
    background-color: #eeeeee;
}

.aboutB .container {
    padding: 0 10px 0 10px;
}

.aboutB .cen {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.aboutB h2 {
    display: table-cell;
    background-color: #ffffff;
    width: 192px;
    height: 192px;
    border-radius:100px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border:4px solid #ee7000;
    font-size: 24px;
    color: #ee7000;
    letter-spacing: normal;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
}

.aboutB dl {
    margin-bottom: 10px;
    padding: 15px 20px;;
    background-color: #ffffff;
    line-height: 1.8;
    letter-spacing: 0.1em;
}

.aboutB dl dt.new {
	margin-bottom: 5px;
	background-color: #AA0002;
	color: #FFFFFF;
	font-size: 12px;
	text-align: center;-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.aboutB dl dt {
    font-weight: 600;
}

.aboutB .up {
    margin-top: 30px;
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
}

.aboutB .lo {
    margin-bottom: 60px;
    border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
}

.aboutB .flex_p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.aboutB .flex {
    flex: 1 1 0%;
    max-width: 245px;
    padding-left: 10px;
    padding-right: 10px;
}

.aboutB p {
    text-align: center;
    line-height: 1;
}

.aboutB a {
	color: #ee7000;	
}

@media (min-width: 768px) {
    .aboutB .container {
        max-width: 980px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 767px) {
    .aboutB p:last-child {
    line-height: 1.3;
    }
}

/* --------------------------------- aboutC ----------------------------------- */
.aboutC {
    padding: 100px 0 100px 0;
}

.aboutC .container {
    padding: 0 10px 0 10px;
    text-align: center;
}

.aboutC a {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 6px;
    background-color: #ee7000;
    color: #FFFFFF;
    font-size: 16px;
    text-decoration: none;
}

.aboutC a:hover {
    background-image: linear-gradient(
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.2)
    )
}

/* --------------------------------- campanyA ----------------------------------- */
.companyA {
    padding: 160px 0 100px 0;
	text-align: left;
}

.companyA .container {
    padding: 0 10px 0 10px;
}

.companyA dt, .companyA dd {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 20px;
    padding-right: 20px;
    border-top: #ee7000 solid 1px;
}

.companyA dt {
    background-color: #EEEEEE;
    text-align: center;
    }

.companyA dd {
    }


@media (min-width: 768px) {
    .companyA .container {
        max-width: 980px;
        margin-right: auto;
        margin-left: auto;
    }
    
    .companyA dl {
    display: flex;
    flex-wrap: wrap;
    }
    
    .companyA dt {
    width: 30%;
    background-color: #EEEEEE;
    text-align: center;
    box-sizing: border-box;
    }

    .companyA dd {
        width: 70%;
        box-sizing: border-box;
    }

}

/* --------------------------------- campanyB ----------------------------------- */
.companyB {
    padding: 100px 0 100px 0;
    background-color: #fef6db;
	text-align: center;
}

.companyB .container {
    padding: 0 10px 0 10px;
}

.companyB img {
    width: 220px;
    height: 220px;
    margin-bottom: 50px;
    border-radius:100px;
    -moz-border-radius:110px;
    -webkit-border-radius:110px;
}

.companyB p{
    text-align: left;
}


@media (min-width: 768px) {
    .companyB .container {
        max-width: 700px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* --------------------------------- companyC ----------------------------------- */
.companyC {
    padding: 100px 0 100px 0;
	text-align: center;
}

.companyC .container {
    padding: 0 10px 0 10px;
}

#map_container {
  position: relative;
  padding-top: 80%;
}
#map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.companyC .add {
    text-align: left;
    margin-top: 60px;
}


@media (min-width: 768px) {
    #map_container {
      padding-top: 40%;
    }
    
    .companyC .add {
        display: flex;
        max-width: 980px;
        margin-right: auto;
        margin-left: auto;
    }
    
    .companyC p {
        width: 50%;
    }
    
}

/* --------------------------------- term of use A ----------------------------------- */
.touA {
    padding: 160px 0 0 0;
	text-align: left;
}

.touA .container {
	margin-left: auto;
	margin-right: auto;
    padding: 0 10px 0 10px;
	max-width: 700px;
}

.touA h2 {
	font-weight: 500;
}

.touA p {
	margin-bottom: 60px;
}

.touA span {
	color: #ee7000;
}

/* --------------------------------- casesA ----------------------------------- */
.casesA {
    padding: 160px 0 0 0;
	text-align: left;
}

.casesA .container {
    padding: 0 10px 0 10px;
}

.casesA .container .formA {
	letter-spacing: normal;
}

.formA .cms-form-mail {
	color: #555555;
}

.cms-form-mail.default input {
    padding: 10px 0 10px 5px;
	margin: 5px 0;
}

.cms-form-mail.default textarea {
    padding: 7px 0 7px 5px ;
    margin: 5px 0;
}

.cms-form-mail.default ._form-inpuyArea th {
    padding: 18px 10px 0 10px;
}

.cms-form-mail.default input[type=button], .cms-form-mail.default input[type=submit] {
    margin: 20px auto 100px auto;
	letter-spacing: 0.25em;
}



.casesA h3 {
	margin-top: 30px;
    padding: 15px;
    background-color: #fd564d;
    text-align: center;
    line-height: 1;
    font-size: 23px;
    font-weight: 400;
    color: #ffffff;
    border-radius:8px 8px 0px 0px;
    -moz-border-radius:8px 8px 0px 0px;
    -webkit-border-radius:8px 8px 0px 0px;
}

.casesA h3:first-of-type {
	margin-top: 0;
}

.casesA .des {
	display: inline-flex;
    padding: 15px 15px 0 15px;
}

.casesA dt {
	white-space: nowrap;
}

.casesA dd {
	padding-left: 10px;
}

.casesA dd span {
	color: #dd7000;
}

@media (min-width: 768px) {
    .casesA .container {
        max-width: 700px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 767px) {
    .casesA h1, .casesA h3 {
        line-height: 1.3;
    }
}


/* --------------------------------- casesB ----------------------------------- */
.casesB {
    padding: 100px 0 100px 0;
}

.casesB .container {
    padding: 0 10px 0 10px;
    text-align: center;
}

.casesB a {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 6px;
    background-color: #ee7000;
    color: #FFFFFF;
    font-size: 16px;
    text-decoration: none;
}

.casesB a:hover {
    background-image: linear-gradient(
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.2)
    )
}


/* --------------------------------- term of use B ----------------------------------- */
.touB {
    padding: 100px 0 100px 0;
}

.touB .container {
    padding: 0 10px 0 10px;
    text-align: center;
}

.touB a {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 6px;
    background-color: #ee7000;
    color: #FFFFFF;
    font-size: 16px;
    text-decoration: none;
}

.touB a:hover {
    background-image: linear-gradient(
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.2)
    )
}



/* --------------------------------- footer ----------------------------------- */
footer {
    padding-top: 60px;
    padding-bottom: 20px;
    background-color: #0084a1;
    color: #ffffff;
}

footer .container {
    padding: 0 10px 0 10px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

footer a {
    color: #ffffff;
    text-decoration: none;
}

footer .footer_A {
    margin-bottom: 60px;
    padding-top: 10px;
    text-align: left;
    border-top: solid #ffffff 1px;
    
}

footer ul {
    list-style: none;
    font-size: 16px;
}

footer .footer_A a {
    display: block;
    padding: 5px;
}

footer .footer_A a:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

footer .footer_B {
    margin-bottom: 60px;
    padding-top: 15px;
    text-align: left;
    border-top: solid #ffffff 1px;
    
}

footer .footer_B a {
    font-size: 24px;
}

footer .footer_B h2 {
    padding-left: 5px;
}

footer .footer_B p {
    padding-left: 5px;
}
footer .footer_B nav {
    padding-left: 5px;
}

footer .footer_C {
    text-align: center;
    font-weight: 200;
    line-height: 1;
    letter-spacing: normal;
}

@media (min-width: 768px) {
    footer .container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    
    footer .footer_A {
        margin-right: 20px;
    }
    
    footer .footer_B {
        margin-left: 20px;
    }
    
    footer .wrap {
        flex: 0 0 50%;
    }
    
    footer .footer_C {
        flex: 0 0 100%;
    }
}