@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(max-width:999px){

/*STYLE*/
.pc {
display:none;
}

.wrap {
margin-top:60px;
}

.cts {
width:90%;
margin:auto;
}

.titles {
text-align:center;
padding-bottom:40px;
}

.titles h2 {
line-height:100%;
letter-spacing:5px;
color:#8e8048;
}

.titles .subtitle {
letter-spacing:5px;
padding-top:10px;
color:#8e8048;
}

.en {
font-family:'Crimson Text', serif;
}

.caption {
position:absolute;
right:5px;
bottom:5px;
font-size:50% !important;
line-height:100%;
letter-spacing:2px;
color:#fff;
z-index:99;
text-shadow:0 0 3px rgba(0,0,0,1);
}

.caption.bl {
left:5px;
right:none;
}

.caption.bk {
color:#666;
}



/*HEADER*/
header {
width:100%;
height:60px;
background:rgba(255,255,255,1);
position:fixed;
top:0;
left:0;
z-index:9999;
display:flex;
justify-content:space-between;
align-items:center;
padding-left:10px;
}

header h1 {
width:70%;
}

header .contact {
display:none;
}

header .contact img {
width:110px;
}



/*MV*/
#mv {
width:100%;
height:calc(100vh - 60px);
overflow:hidden;
position:relative;
display:flex;
align-items:center;
}

#mv .mv {
width:100%;
height:calc(100vh - 60px);
}

#mv video {
min-width:100%;
min-height:calc(100vh - 60px);
width:auto;
height:auto;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

#mv .mv_title {
width:70%;
position:absolute;
z-index:999;
left:0;
right:0;
margin:auto;
text-align:center;
}

#mv .mv_title .title {
margin-bottom:20px;
}

#mv .mv_title .en {
font-size:100%;
letter-spacing:5px;
color:#fff;
}



/*SWIPER*/
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: -30px;
}

.swiper-pagination-bullet-active {
background: #808080;
}



/*TOP_TOPICS*/
#top_topics {
padding:70px 0 70px;
}

#top_topics h2 {
font-size:250%;
letter-spacing:7px;
}

.topics {
display:flex;
flex-wrap:wrap;
}

.topics .topic {
width:100%;
margin-bottom:30px;
opacity:1;
transition:0.5s;
}

.topics .topic.is-hidden {
visibility:hidden;
opacity:0;
height:0;
margin-bottom:0;
}

.topics .topic:nth-child(3n) {
margin-right:0;
}

.topics .topic .photo {
margin-bottom:15px;
}

.topics .topic .date {
font-size:110%;
border-bottom:#666 1px solid;
padding-bottom:10px;
margin-bottom:15px;
}

.topics .topic .ex {
font-size:90%;
line-height:170%;
}

.pagenation {
display:flex;
justify-content:center;
}

.pagenation a {
padding:6px 12px;
margin:0 5px;
border:#8e8048 1px solid;
border-radius:10vw;
}

.pagenation a.none {
opacity:0.4;
pointer-events:none;
}

.pagenation a.now {
background:#8e8048;
}

.pagenation a.now p {
color:#fff;
}

.pagenation a p {
font-size:80%;
letter-spacing:0;
text-align:center;
color:#8e8048;
}

#top_topics .more {
cursor:pointer;
}

#top_topics .more a {
display:flex;
justify-content:center;
align-items:center;
border:#8e8048 1px solid;
width:400px;
height:55px;
margin:auto;
pointer-events:none;
}

#top_topics .more.next a {
pointer-events:auto;
}

#top_topics .more img {
width:20px;
}

#top_topics .more p {
font-size:100%;
color:#8e8048;
letter-spacing:7px;
padding-left:30px;
line-height:100%;
}

#top_topics .more p:before {
content:"さらに表示";
}

#top_topics .more.next p:before {
content:"お知らせ一覧";
}

#top_topics .comingsoon {
}

#top_topics .comingsoon p {
border-top:#8e8048 1px solid;
border-bottom:#8e8048 1px solid;
padding:50px 0;
font-size:120%;
letter-spacing:10px;
text-align:center;
color:#8e8048;
}

#topics {
padding-bottom:70px;
}

#topics .topics_cts {
}

#topics .topics_cts h3 {
font-size:135%;
}

#topics .topics_cts .date {
font-size:100%;
display:inline-block;
color:#8e8048;
padding-top:3px;
}

#topics .topics_cts .photo {
margin:20px auto 0;
}

#topics .topics_cts .ex {
margin-top:30px;
}

#topics .topics_cts .ex p {
font-size:100%;
line-height:180%;
}

#topics .topics_cts .movie {
width:100%;
margin:30px auto 0;
padding-top: 56.25%;
position:relative;
}

#topics .topics_cts .movie iframe {
position: absolute;
top:0;
right:0;
width:100% !important;
height:100% !important;
}

#topics .topics_cts .btns {
padding-top:50px;
}

#topics .topics_cts .btns .btn {
width:100%;
margin-bottom:15px;
}

#topics .topics_cts .btns .btn:last-child {
margin-bottom:0;
}

#topics .topics_cts .btns .btn a {
display:block;
color:#fff;
padding:20px;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}

#topics .topics_cts .btns .btn.pdf a {
border:#8e8048 1px solid;
}

#topics .topics_cts .btns .btn.pdf a p {
color:#8e8048;
}

#topics .topics_cts .btns .btn.pdf a img {
width:20px;
margin-right:20px;
}

#topics .topics_cts .btns .btn.more a {
background:#8e8048;
border:#8e8048 1px solid;
}

#topics .topics_cts .btns .btn.more a p {
color:#fff;
}

#topics .topics_cts .btns .btn.more a img {
width:18px;
margin-right:20px;
}

#topics .BackToList {
margin-top:30px;
text-align:center;
}

#topics .BackToList a {
border:#8e8048 1px dotted;
padding:15px 20px;
color:#8e8048;
font-size:90%;
}

#topics .comingsoon {
}

#topics .comingsoon p {
border-top:#8e8048 1px solid;
border-bottom:#8e8048 1px solid;
padding:50px 0;
font-size:150%;
letter-spacing:10px;
text-align:center;
color:#8e8048;
}



/*CONETNTS*/
#contents {
}

#contents .titles {
width:65%;
margin:auto;
padding-bottom:30px;
}

#contents .titles h2 {
}

#contents .titles .subtitle {
line-height:180%;
}

#contents .contents {
}

#contents .contents .content {
width:100%;
height:100vw;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
margin-bottom:10px;
position:relative;
}

#contents .contents .content.content1 {
background:url(../img/contents_1.jpg) center;
background-size:cover;
}

#contents .contents .content.content2 {
background:url(../img/contents_2.jpg) center;
background-size:cover;
}

#contents .contents .content.content3 {
background:url(../img/contents_3.jpg) center;
background-size:cover;
}

#contents .contents .content.content4 {
background:url(../img/contents_4.jpg) center;
background-size:cover;
}

#contents .contents .content h3 {
font-size:150%;
color:#fff;
letter-spacing:10px;
line-height:180%;
padding:0 0 10px 20px;
text-shadow:0 0 7px rgba(0,0,0,0.7);
text-align:center;
}

#contents .contents .content .kana {
color:#fff;
font-size:80%;
letter-spacing:5px;
}

#contents .contents .content .kana.en {
color:#fff;
font-size:80%;
letter-spacing:5px;
}

#contents .contents .content:nth-child(1) h3 {
padding-left:15px;
}

#contents .contents .content:nth-child(2) h3 {
}

#contents .contents .content:nth-child(3) h3 {
color:#666;
text-shadow:none;
}

#contents .contents .content:nth-child(4) h3 {
font-size:150%;
letter-spacing:10px;
line-height:135%;
padding-left:10px;
text-shadow:none;
}

#contents .contents .content:nth-child(3) .en {
color:#666;
}

#contents .contents .content a {
width:50%;
height:50px;
background:#8e8048;
display:flex;
justify-content:center;
align-items:center;
margin-top:30px;
position:relative;
}

#contents .contents .content a p {
font-size:100%;
color:#fff;
letter-spacing:3px;
}

#contents .contents .content a .arrow {
border-right:transparent 8px solid;
border-top:transparent 5px solid;
border-bottom:transparent 5px solid;
border-left:#fff 8px solid;
position:absolute;
right:10px;
}



/*VISION*/
#vision {
padding:70px 0;
background:url(../img/vision_bg.jpg) center;
background-size:cover;
margin-bottom:70px;
}

#vision .titles h2 {
font-size:200%;
letter-spacing:7px;
}

#vision .titles {
padding-bottom:30px;
}

#vision .titles .subtitle {
font-size:90%;
}

#vision .ex {
}

#vision .ex .item {
font-size:150%;
letter-spacing:5px;
line-height:180%;
text-align:center;
}

#vision .ex p {
padding-bottom:30px;
font-size:95%;
line-height:200%;
}

#vision .ex p:first-child {
padding-bottom:20px;
}

#vision .ex p:last-child {
padding-bottom:0;
}



/*OUTLINE*/
#outline {
padding:70px 0 50px;
}

#outline .cts {
width:90%;
}

#outline .titles {
padding-bottom:30px;
}

#outline .titles h2 {
font-size:200%;
letter-spacing:7px;
}

#outline .titles .subtitle {
font-size:90%;
}

#outline .companies {
}

#outline .companies .company {
border-bottom:#8e8048 1px solid;
padding-bottom:15px;
margin-bottom:15px;
}

#outline .companies .company:first-child {
border-top:#8e8048 1px solid;
padding-top:15px;
}

#outline .companies .company:nth-child(6) {
display:flex;
justify-content:space-between;
}

#outline .companies .company:nth-child(6) .item {
width:40%;
}

#outline .companies .company:nth-child(6) .detail {
width:60%;
}

#outline .companies .company .item {
width:100%;
font-size:95%;
line-height:200%;
}

#outline .companies .company .detail {
width:100%;
}

#outline .companies .company .detail p {
font-size:95%;
line-height:180%;
}



/*ATTENTION*/
#attention {
width:90%;
margin:0 auto 20px;
}

#attention p {
font-size:70%;
}



/*INFORMATION*/
#information {
width:100%;
padding:70px 0;
background:url(../img/contact_bg.jpg) center;
background-size:cover;
}

#information .cts {
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

#information .contact {
text-align:center;
}

#information .contact .item {
font-size:110%;
color:#fff;
padding-bottom:25px;
}

#information .contact .copy {
font-size:80%;
color:#fff;
letter-spacing:1px;
padding-bottom:20px;
line-height:200%;
}

#information .contact .tel {
width:90%;
margin:0 auto 25px;
}

#information .contact .info {
font-size:70%;
color:#fff;
}



/*UNDER*/
.pagetitles {
text-align:center;
padding:50px 0 30px;
}

.pagetitles h2 {
font-size:250%;
color:#8e8048;
}

.pagetitles .kana {
font-size:90%;
}



/*CONTACT*/
#contact {
padding-bottom:100px;
}

#contact .steps {
width:100%;
display:flex;
justify-content:space-between;
margin-bottom:30px;
}

#contact .steps .step {
width:29%;
height:70px;
background:rgba(142,128,72,0.2);
position:relative;
text-align:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

#contact .steps .step.now {
background:rgba(142,128,72,1);
}

#contact .steps .step:after {
content:"";
width:20px;
height:70px;
border-left:rgba(142,128,72,0.2) 20px solid;
border-top:transparent 35px solid;
border-right:transparent 20px solid;
border-bottom:transparent 35px solid;
position:absolute;
right:-40px;
top:0;
}

#contact .steps .step.now:after {
border-left:rgba(142,128,72,1) 20px solid;
}

#contact .steps .step .number {
font-size:70%;
}

#contact .steps .step.now .number {
color:#fff;
}

#contact .steps .step .ex {
font-size:70%;
}

#contact .steps .step.now .ex {
color:#fff;
}

#contact .intro {
text-align:center;
padding-bottom:30px;
}

#contact .intro h3 {
font-size:135%;
color:#8e8048;
padding-bottom:10px;
}

#contact .intro .copy {
line-height:180%;
text-align:left;
font-size:100%;
}

#contact form {
}

#contact form .forms {
}

#contact form .forms .form {
border-bottom:#f0f0f0 1px solid;
padding-bottom:15px;
margin-bottom:15px;
}

#contact form .forms .form:first-child {
border-top:#f0f0f0 1px solid;
padding-top:15px;
}

#contact form .forms .form .item {
width:100%;
font-size:100%;
font-weight:500;
letter-spacing:3px;
line-height:200%;
padding-bottom:5px;
}

#contact form .forms .form .item span {
letter-spacing:1px;
padding:5px 7px;
margin-right:10px;
}

#contact form .forms .form .item .required {
font-size:70%;
background:#ae0e16;
color:#fff;
}

#contact form .forms .form .item .required:before {
content:"必須";
}

#contact form .forms .form .item .any {
font-size:80%;
color:#b4b4b4;
border:#b4b4b4 1px solid;
}

#contact form .forms .form .item .any:before {
content:"任意";
}

#contact form .forms .form .detail {
width:100%;
font-size:100%;
}

#contact form .forms .form .detail p {
font-size:100%;
}

#contact form .forms .form .detail label {
font-size:100%;
margin-right:10px;
cursor:pointer;
}

#contact form .contact_types {

}

#contact form .contact_types .contact_type {
margin-right:15px;
}

#contact form .contact_types .contact_type:nth-child(4) {
margin-right:0;
}

#contact form .purposes {
display:flex;
flex-wrap:wrap;
align-items:center;
}

#contact form .purposes .purpose {
margin-right:15px;
}

#contact form .purposes .purpose:nth-child(4) {
width:100%;
margin:10px 0 0 0;
}

#contact form .process_cts {
display:flex;
flex-wrap:wrap;
}

#contact form .process_cts .process {
width:50%;
margin-bottom:5px;
}

#contact form .process_cts .process:last-child {
}

#contact form .btns {
display:flex;
justify-content:center;
align-items:center;
}

#contact form input,
#contact form select {
letter-spacing:3px;
cursor:pointer;
}

#contact form select {
padding:15px 20px;
}

#contact form input[type="submit"],
#contact form input[type="button"] {
border:none;
font-size:90%;
padding:18px 25px 18px 30px;
cursor:pointer;
}

#contact form input[type="submit"]:hover,
#contact form input[type="button"]:hover {
-webkit-animation:hover 0.5s ease forwards;
animation:hover 0.5s ease forwards;
}

#contact form input[type="text"],
#contact form input[type="tel"],
#contact form input[type="number"],
#contact form input[type="date"],
#contact form textarea {
padding:15px 20px;
letter-spacing:1px;
}

#contact form .style_name {
width:100%;
}

#contact form .style_kana {
width:100%;
}

#contact form .style_age {
width:30%;
margin-right:10px;
}

#contact form .style_post {
width:40%;
margin-left:5px;
margin-bottom:10px;
}

#contact form .style_address {
width:100%;
}

#contact form .style_office {
width:100%;
}

#contact form .style_tel {
width:100%;
}

#contact form .style_phone {
width:100%;
}

#contact form .style_mail {
width:100%;
}

#contact form .style_contact {
}

#contact form .style_etc {
width:100%;
margin:5px 0 0;
}

#contact form .style_income {
margin-right:10px;
}

#contact form .style_frequency {
}

#contact form .style_purpose {
}

#contact form .style_purpose_etc {
width:300px;
margin:0;
}

#contact form .style_budget {
}

#contact form .style_question1 {
}

#contact form .style_question2 {
}

#contact form .style_question3 {
}

#contact form .style_hotel_etc {
width:100%;
margin-top:5px;
}

#contact form .style_buy {
width:50%;
margin:0;
}

#contact form .style_day {
}

#contact form .style_process {
}

#contact form .style_process_etc {
width:300px;
margin:0;
}

#contact form .style_hobby {
width:50%;
}

#contact form .style_newspaper {
width:50%;
}

#contact form .style_detail {
width:100%;
height:200px;
}

#contact form .style_submit {
background:#8e8048;
color:#fff;
margin:0 10px;
}

#contact form .style_fix {
border:#8e8048 1px solid !important;
color:#8e8048;
margin:0 10px;
}

#contact .warning {
font-size:80%;
color:#ae0e16;
display:block;
}

#contact .attention {
font-size:80%;
text-align:left;
letter-spacing:3px;
padding-top:7px;
}

#contact .back_btn {
margin-top:30px;
text-align:center;
}

#contact .back_btn a {
border:#8e8048 1px dotted;
padding:15px 20px;
color:#8e8048;
font-size:90%;
}



/*SUBDIVISION*/
#subdivision {
}

#subdivision .subdivision_title {
width:100%;
width:100%;
height:calc(100vh - 60px);
background:url(../subdivision/img/main.jpg) center;
background-size:cover;
position:relative;
}

#subdivision .subdivision_title h2 {
font-size:135%;
color:#8e8048;
letter-spacing:5px;
line-height:200%;
text-align:center;
padding:85px 0 0 15px;
}

#subdivision .intro {
padding:50px 0;
}

#subdivision .intro p {
font-size:100%;
letter-spacing:3px;
line-height:250%;
}

#subdivision .intro .photos {
padding:30px 0;
display:flex;
justify-content:center;
}

#subdivision .intro .photos .photo {
margin-right:10px;
}

#subdivision .intro .photos .photo:last-child {
margin-right:0;
}

#subdivision .attention {
font-size:70%;
padding-bottom:10px;
display:flex;
}

#subdivision .subdivision_title .for_owner {
    width:100%;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    position:fixed;
    z-index:997;
}

#subdivision .subdivision_title .for_owner a {
    background:#8e8048;
    display:block;
    padding:20px 25px;
    display:flex;
    justify-content:center;
}

#subdivision .subdivision_title .for_owner a img {
    width:18px;
}

#subdivision .subdivision_title .for_owner a .item {
    margin-left:12px;
    display:flex;
    align-items:center;
}

#subdivision .subdivision_title .for_owner a .item .for {
    font-size:90%;
    color:#fff;
}

#subdivision .subdivision_title .for_owner a .item .owner {
    font-size:90%;
    color:#fff;
}



/*PRIVACY*/
#privacy {
padding-bottom:100px;
}

#privacy p {
line-height:200%;
}

#privacy .intro {
padding-bottom:50px;
}

#privacy .privacies {
}

#privacy .privacies h3 {
font-size:100%;
padding-bottom:7px;
}

#privacy .privacies .privacy {
padding-bottom:40px;
}

#privacy .privacies .privacy:last-child {
padding-bottom:0;
}

#privacy .privacies .privacy .item {
font-size:100%;
color:#8e8048;
}

#privacy .privacies .privacy .ex {
}

#privacy .privacies .privacy .ex ul {
}

#privacy .privacies .privacy .ex ul li {
line-height:200%;
display:flex;
}



/*GROBAL*/
#grobal {
position:absolute;
top:0;
right:0;
}

#grobal .nav_btn {
width:60px;
height:60px;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
position:absolute;
top:0;
right:0;
z-index:9999;
}

#grobal .nav_btn:hover {
-webkit-animation:hover 0.5s ease forwards;
animation:hover 0.5s ease forwards;
}

#grobal .nav_btn span {
width:32px;
height:3px;
background:#666;
position:absolute;
}

#grobal .nav_btn span:first-child {
top:17px;
transition:0.5s;
}

#grobal .nav_btn span:first-child.show {
top:28.5px;
transform:rotate(45deg);
}

#grobal .nav_btn span:nth-child(2) {
transition:0.5s;
}

#grobal .nav_btn span:nth-child(2).show {
opacity:0;
}

#grobal .nav_btn span:last-child {
bottom:17px;
transition:0.5s;
}

#grobal .nav_btn span:last-child.show {
bottom:28.5px;
transform:rotate(-45deg);
}

#grobal .grobal_nav {
width:100%;
height:100%;
background:rgba(255,255,255,0.95);
position:fixed;
top:0;
left:0;
visibility:hidden;
opacity:0;
transition:0.5s;
padding:0;
overflow:auto;
display:flex;
justify-content:center;
align-items:center;
}

#grobal .grobal_nav.show {
visibility:visible;
opacity:1;
}

#grobal .grobal_nav .menus {
width:80%;
margin:auto;
}

#grobal .grobal_nav .menus .home {
margin-bottom:50px;
text-align:center;
}

#grobal .grobal_nav .menus .home img {
width:300px;
}

#grobal .grobal_nav .menus .menu {
margin-bottom:20px;
}

#grobal .grobal_nav .menus .menu a {
display:flex;
justify-content:space-between;
align-items:center;
}

#grobal .grobal_nav .menus .menu a .photo {
width:30%;
}

#grobal .grobal_nav .menus .menu a nav {
width:65%;
font-size:100%;
}

#grobal .grobal_nav .menus .menu_news {
margin-bottom:15px;
}

#grobal .grobal_nav .menus .menu_news a {
border:#8e8048 1px solid;
width:100%;
height:50px;
display:flex;
justify-content:center;
align-items:center;
}

#grobal .grobal_nav .menus .menu_news nav {
font-size:100%;
color:#8e8048;
text-align:center;
}

#grobal .grobal_nav .menus .menu_contact {
margin-bottom:20px
}

#grobal .grobal_nav .menus .menu_contact a {
background:#8e8048;
width:100%;
height:50px;
display:flex;
justify-content:center;
align-items:center;
}

#grobal .grobal_nav .menus .menu_contact nav {
font-size:100%;
color:#fff;
text-align:center;
}

#grobal .grobal_nav .menus .menu_home {
}

#grobal .grobal_nav .menus .menu_home a {
border:#8e8048 1px dotted;
width:100px;
height:45px;
display:flex;
justify-content:center;
align-items:center;
margin:auto;
}

#grobal .grobal_nav .menus .menu_home nav {
font-size:90%;
color:#8e8048;
text-align:center;
}



/*SCROLL ACTION*/
.photo_scroll {
width:100%;
height:100%;
background:#fff;
position:absolute;
top:0;
left:0;
right:0;
margin:auto;
}



/*FOOTER*/
footer {
padding:30px 0;
}

footer.under {
    padding-bottom:100px;
}

footer .cts {
}

footer .logolink {
text-align:center;
}

footer .logolink img {
width:50%;
margin-bottom:20px;
}

footer .logolink .link {
font-size:70%;
line-height:100%;
padding:0 30px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:20px;
}

footer .logolink .link a {
letter-spacing:1px;
display:block;
}

footer .logolink .link a:first-child {
margin-right:20px;
}

footer .logolink .link .partition {
width:1px;
height:20px;
background:#e1e1e1;
display:block;
}

footer .logolink .link a:last-child {
margin-left:20px;
}

footer .copyright {
font-size:70%;
text-align:center;
}



/*NOW LOADING*/
#loader {
    width:100%;
    height:100vh;
    background:#fff;
    position:absolute;
    top:0;
    left:0;
    z-index:999;
    display:flex;
    justify-content:center;
    align-items:center;
}

#loader.loaded {
    animation: fadeOut 0.5s forwards;
}




}