@charset "UTF-8";

html, body{
	font-family: 'Noto Sans JP', 'Fira Sans',sans-serif;
	color: #383838;
}

#wrapper{
    width:1024px;
    overflow: hidden;
    margin: 0 auto 50px;
}

@media screen and (max-width: 959px){
    #wrapper{
        max-width:95%;
        margin-bottom: 200px;
    }
}

@media screen and (max-width: 599px) {
    #wrapper{
        max-width:95%;
        height: auto;
        margin: 0 auto;
    }
}

.z-1 {
    z-index: -1;
}
.z1 {
    z-index: 1;
}
.z9999 {
    z-index: 9999;
}


/*=============== （個別ページ・front-page.php）VISONエリア ===============*/

#vison.home {
    width: 100%;
    height: 615px;
    background: url("../image/two-image.jpg") no-repeat;
    margin-bottom: 75px;
    background-size: 100%;
}

@media screen and (max-width: 959px) {
    #vison.home {
        max-height: 450px;
        background-size: cover;
    }
}

@media screen and (max-width: 599px) {
    #vison.home {
        max-height: 450px;
    }
}



/*===== ロゴ設置エリア =====*/

#vison.home  #logoArea{
    width:162px;
    margin: 0 auto;
    position: relative;
    top: 180px;
    display: block;
}
@media screen and (max-width: 959px) {
    #vison.home  #logoArea{
        top: 130px;
    }
}
@media screen and (max-width: 599px) {
    #vison.home  #logoArea{
        top: 130px;
    }
}

#vison.home  #logoArea .logo_img img{
    width:162px;
}

#vison.home  #logoArea .logo_url{
    color: #FFF;
    font-size:14px;
    text-align: center;
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: bold;
}


/*=============== （個別ページ【別パターン】）VISONエリア ===============*/

#vison.page,
#vison.error404 {
    width: 100%;
    height: 380px;
    background: url("../image/page_cover.jpg") no-repeat bottom;
    background-size: cover;
}

@media screen and (max-width: 959px) {
    #vison.page,
    #vison.error404 {
        max-height: 450px;
    }
}


@media screen and (max-width: 599px) {
    #vison.page,
    #vison.error404 {
        max-height: 450px;
    }
}



/*===== ロゴ設置エリア =====*/

#vison.page #logoArea,
#vison.error404 #logoArea {
    margin: 0 auto;
    position: relative;
    top: 150px;
}

@media screen and (max-width: 959px) {
    #vison.page #logoArea,
    #vison.error404 #logoArea {
        top: 130px;
    }
}

@media screen and (max-width: 599px) {
    #vison.page #logoArea,
    #vison.error404 #logoArea {
        top: 130px;
    }
}

#vison.page #logoArea .logo_title,
#vison.error404 #logoArea .logo_title {
    color: #FFF;
    font-size:55px;
    letter-spacing: 0.3em;
    text-align: center;
    margin: 0 auto;
    display:block;
}

@media screen and (max-width:599px){
#vison.page #logoArea .logo_title,
#vison.error404 #logoArea .logo_title {
    font-size:38px;
    letter-spacing: 0.3em;
    text-align: center;
    margin: 0 auto;
    display:block;
}

	
	
}



#vison.page #logoArea .logo_url,
#vison.error404 #logoArea .logo_url {
    color: #FFF;
    font-size:14px;
    text-align: center;
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: bold;
    display: block;
}

/*============パンくず　front-page.php 以外==========*/
.breadcrumb {
    margin: 10px 0 28px;
    padding: 0 5%;
    overflow: hidden;
}

@media screen and (max-width: 959px) {
    .breadcrumb {
        width: 90%;
    }
}

.breadcrumb ul {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding: 4px 0;
}

.breadcrumb li {
    font-size: 12px;
    color: #000;
    display: flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}

.breadcrumb li + li:before {
    content: "";
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219.192%22%20height%3D%2236.411%22%20viewBox%3D%220%200%2019.192%2036.411%22%3E%3Cpath%20d%3D%22M.691%2035.664a2.7%202.7%200%20010-3.61l12.823-13.848L.691%204.358a2.7%202.7%200%20010-3.61%202.242%202.242%200%20013.343%200L18.5%2016.379a2.635%202.635%200%2001.692%201.824%202.624%202.624%200%2001-.692%201.821L4.033%2035.66a2.273%202.273%200%2001-1.671.747%202.277%202.277%200%2001-1.671-.743z%22%20fill%3D%22%23989898%22%20opacity%3D%22.8%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    display: block;
    width: 6px;
    height: 10px;
    background-position: center center;
    background-size: contain;
    margin-right: 8px;
    margin-left: 8px;
    margin-top: -2px;
}

.breadcrumb a {
    color: #000;
}

.home .breadcrumb {
    display: none;
}

/*=========== （全ページ）表通タグ ==========*/

#service .under_jpn{
    font-size: 24px;
    text-align: center;
    line-height: 250%;
    margin-bottom: 40px;
}

#service .under_jpn::before{
    content: "SERVICE";
    display: block;
    font-size: 54px;
    letter-spacing: 0.3em;
    text-align: center;
}


@media screen and (max-width: 599px) {
    #service .under_jpn{
        font-size: 20px;
        margin-bottom: 20px;
    }
    #service .under_jpn::before{
        font-size:48px;
    }
}



#works .under_jpn{
    font-size: 24px;
    text-align: center;
    line-height: 250%;
    margin-bottom: 40px;
}

#works .under_jpn::before{
    content: "WORK";
    display: block;
    font-size: 54px;
    letter-spacing: 0.3em;
    text-align: center;
}


@media screen and (max-width: 599px) {
    #works .under_jpn{
        font-size: 20px;
        margin-bottom: 20px;
    }
    #works .under_jpn::before{
        font-size:48px;
    }
}

#flow .under_jpn {
    font-size: 24px;
    text-align: center;
    line-height: 250%;
    margin-bottom: 40px;
}

#flow .under_jpn::before {
    content: "FLOW";
    display: block;
    font-size: 54px;
    letter-spacing: 0.3em;
    text-align: center;
}

@media screen and (max-width: 599px) {
    #flow .under_jpn {
        font-size: 20px;
        margin-bottom: 20px;
    }
    #flow .under_jpn::before {
        font-size:48px;
    }
}

#flow_nav h2 {
    font-size: 24px;
    text-align: center;
    line-height: 250%;
    margin-bottom: 40px;
}

#flow_nav h2::before {
    content: "FLOW";
    display: block;
    font-size: 54px;
    letter-spacing: 0.3em;
    text-align: center;
}

@media screen and (max-width: 599px) {
    #flow,#flow_nav, h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }
    #flow,#flow_nav, h2::before {
        font-size:48px;
    }
}



#profile_area .under_jpn{
    font-size: 24px;
    text-align: center;
    line-height: 250%;
    margin-bottom: 40px;
}

#profile_area .under_jpn::before{
    content: "PROFILE";
    display: block;
    font-size: 54px;
    letter-spacing: 0.3em;
    text-align: center;
}

@media screen and (max-width: 599px) {
    #profile_area .under_jpn{
        font-size: 20px;
        margin-bottom: 20px;
    }
    #profile_area .under_jpn::before{
        font-size:48px;
    }
}

/*========================================================================================


▼▼▼▼▼▼▼▼▼以下よりfront-page.php▼▼▼▼▼▼▼▼▼


========================================================================================*/



/*=========== （front_page.php）メッセージ ==========*/


#lead{
    max-width: 100%;
    height: 210px;
    margin: 0 auto 180px;
}

#lead .lead_heading {
    display: block;
    width: 100%;
    font-size: 32px;
    color: #1D91D8;
    text-align: center;
    margin: 0 0 20px 0;
}
@media screen and (max-width: 599px) {
    #lead .lead_heading{
        font-size:21px;
    }
}


#lead .lead_txt{
    display: block;
    width: 100%;
    font-size:16px;
    line-height:200%;
    text-align: center;
    margin: 0 auto;
}
@media screen and (max-width: 599px) {
    #lead .lead_txt{
        font-size:14px;
    }
}




/*=========== （front_page.php・固定ページ）SERVICE ==========*/

#service{
    max-width: 1024px;
    overflow: hidden;
    margin: 0 0 150px 0;
}

@media screen and (max-width: 959px) {
    #service{
        max-width: 100%;
    }
}

@media screen and (max-width: 599px) {
    #service{
        max-width: 100%;
    }
}

#Service_table{
    max-width:1024px;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
@media screen and (max-width: 959px) {
    #Service_table {
        max-width:100%;
    }
}
@media screen and (max-width: 599px) {
    #Service_table {
        max-width:100%;
    }
}


#Service_table li{
    width: 340px;
    height: 290px;
    float: left;
    margin-bottom: 30px;
}

@media screen and (max-width: 959px) {
    #Service_table li{
        max-width: 33%;
        height: auto;
        margin-bottom: 10px;
    }
}
@media screen and (max-width: 599px) {
    #Service_table li{
        max-width: 50%;
        max-height: 220px;
        margin-bottom:5px;
    }
}




/*==========================

（ポップアップ）サービスのためのCSS

==========================*/


.modal_wrap input{
    display: none;
}

/*クリックしたら表示される背景display:flex;*/
.modal_overlay{
    display: flex;
    justify-content: center;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    transition: opacity 0.5s, transform 0s 0.5s;
    transform: scale(0);
}

.modal_trigger {
    position: absolute;
    width: 100%;
    height: 100%;
}

.modal_content{
    position: relative;
    align-self: center;
    width: 60%;
    max-width: 800px;
    padding: 30px 30px 15px;
    box-sizing: border-box;
    background: #FFF;
    line-height: 1.4em;
    transition: 0.5s;
    text-align: center;
}


.modal_wrap input:checked ~ .modal_overlay{
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s;
}


.open_button{/*表示エリア*/
    justify-content: center;
    align-items: center;
    display: block;
    width: 346px;
    height: 285px;
    padding: 0;
    cursor: pointer;/*これでクリックされる*/
}
.open_button:hover {
    opacity: .7;
}

@media screen and (max-width: 959px) {
    .open_button{/*表示エリア*/
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 599px) {
    .open_button{/*表示エリア*/
        width: 100%;
        height: auto;
    }
}

.open_button img{
    display: block;
    width:235px;
    height: 235px;
    margin:0 auto;
}
@media screen and (max-width: 959px) {
    .open_button img{
        max-width:88%;
        height:auto;
    }
}
@media screen and (max-width: 599px) {
    .open_button img{
        width:88%;
        height:auto;
    }
}
/*===========非表示エリア===========*/

.close_lead{
    font-size:18px;
    color: #1D91D8;
    font-weight: bold;
    padding: 0 0 15px 0;
}

.close_extxt{
    font-size:16px;
    line-height: 200%;
    text-align: left;
}

.close_button{
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 24px;
    cursor: pointer;
}


/*各セッション項目*/
.front_lead{
    margin: 15px 0 0 0;
    text-align: center;
}
@media screen and (max-width: 599px) {
    .front_lead{
        margin: 8px 0 0 0;
        font-size: 14px;
    }
}




/*=========== （front_page.php）WORKS ==========*/

#works{
    max-width: 100%;
    height:100%;
    margin: 0 auto 200px;
    letter-spacing: 0.1em;
    font-size: 14px;
}

@media screen and (max-width: 599px) {
    #works{
        max-width: 100%;
        height:100%;
        margin: 0 auto 150px;
        letter-spacing: 0.1em;
    }
}

#works li a {
    color: #000;
}
#works li:hover {
    opacity: .7;
}

#works .works_catch{
    padding: 0;
    margin: 10px 0 10px 20px;
    font-size: 16px;
    font-weight: bold;
}


#works .works_note{
    font-size:14px;
    color:#383838;
    margin: 0 20px;
    height: 60px;
    overflow: hidden;
}
@media screen and (max-width: 599px) {
    #works .works_note{
        height: 85px;
    }
}

#works .works_detail{
    width: 650px;
    margin: 0 auto;
    text-align: center;
    line-height: 180%;
	font-size:13px;
	
}
@media screen and (max-width: 599px) {
    #works .works_detail{
        width: 95%;
        margin: 0 auto;
        text-align: center;
        line-height: 1.5;
        padding-top: 20px;
    }
}
#works .works_contact {
    display: block;
    width: 380px;
	color:#1d91d8;
    border: 1px solid #1d91d8;
    border-radius: 30px;
    margin: 20px auto;
    font-size: 19px;
    xfont-weight: 300;
    text-align: center;
    padding: 15px;
}
#works .works_contact:hover {
    color: #fff;
    opacity: .7;
    background-color: #1d91d8;
}



@media screen and (max-width: 599px) {
    #works .works_contact {
        width: 80%;
    }
}


#works .slider{
    width:650px;
    margin: 0 auto 30px;
}

@media screen and (max-width: 599px) {
    #works .slider{
        max-width:100%;
        max-height:300px;
    }
}

#works .slider img{
    width:100%;
    border-radius: 30px;
    height: 355px;
    object-fit: cover;
}

@media screen and (max-width: 599px) {
    #works .slider img{
        max-width:100%;
        height: 200px;
    }
}


#works .dots2{
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
    position: absolute;
}


@media screen and (max-width: 599px) {
    #works .dots2{
        max-width: 100%;
    }
}

#works .dots2 li{
    width: 650px;
    height:460px;
    position: relative;
    display: inline-block;
    max-width: 8px;
    padding: 0;
    margin: 0 2px;
    border-radius: 100%;
    cursor: pointer;
}

@media screen and (max-width: 599px) {
    #works .dots2 li{
    }
}


/*インジケーターデフォルト削除数字削除*/
#works .dots2 li button{
    font-size: 0;
    background: transparent;
    border: 0;
    text-indent: -9999px;
    position: relative;
}

/*矢印のフォント指定*/
@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url("../vendor/slick/fonts/slick.eot");
    src: url("../vendor/slick/fonts/slick.eot?iefix") format('embedded-opentype'),
    url("../vendor/slick/fonts/slick.woff") format('woff'), url("../vendor/slick/fonts/slick.ttf") format('truetype'), url("../vendor/slick/fonts/slick.svg#slick") format('svg');
}

/*インジケーターデフォルト 前へ後ろへ表示の設定*/
#works .slick-next,
#works .slick-prev{
    z-index: 9999;/*表示するために必要*/
    margin-right: 20px;
}

@media screen and (max-width: 599px) {
    /*インジケーターデフォルト 前へ後ろへ表示の設定*/
    #works .slick-next,
    #works .slick-prev{
        margin-right: 20px;
        margin-top: -32px;
    }
}


/*インジケーターデフォルト 前へ表示位置*/
#works .slick-prev{ left:10px; }

/*インジケーターデフォルト 後ろへ表示位置*/
#works .slick-next{ right: 0; }


.slick-prev:before, .slick-next:before {
    font-family: 'slick', sans-serif;
    font-size:26px;
    line-height: 1;
    background-color: #787878;
    color: #fff;
    border-radius: 100px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev:before{ content: '←';}
.slick-next:before{ content: '→';}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color:transparent;
    outline: none;
    background:transparent;
}


.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    opacity: 0.7;
}

/*=========== （front_page.php・固定ページ）FLOW ==========*/

#flow{
    max-width:100%;
    margin: 0 0 200px 0;
}

@media screen and (max-width: 595px) {
    #flow{
        max-width: 100%;
    }
}

#flow_list{
    width: 100%;
    overflow: hidden;
    margin: 0 auto;display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#flow_list li{
    width:246px;
}

#flow_list li:not(:last-child){
    margin-right: 10px;
}


@media screen and (max-width: 599px) {
    #flow_list li{
        width: 100%;
        padding: 0 0 25px 0;
    }
    #flow_list li:not(:last-child){
        margin-bottom: 10px;
    }
}

#flow_list .flowno{
    font-style: italic;
    display: block;
    font-size:41px;
    text-align: center;
}

#flow_list .flowtoc{
    border-bottom: 1px solid #000;
    font-size:18px;
    text-align: center;
    margin-bottom:10px;
    padding-bottom:5px;
}

#flow_list .flow_note{
    width: 210px;
    margin: 0 auto;
   font-size:14px;
	line-height:180%;
}

@media screen and (max-width: 599px) {
    #flow_list .flow_note{
        width: 90%;
        margin: 0 auto;
        text-align: left;
    }
}

#flow .flow_more{
    width:210px;
    height: 25px;
    border: 1px solid #1d91d8;
    border-radius:60px;
    color: #1d91d8;
    font-size: 15px;
    margin: 60px auto 0;
    padding: 15px;
    text-align: center;
    text-decoration: none;
}
#flow .flow_more:hover {
    color: #fff;
    opacity: .7;
    background-color: #1d91d8;
}




/*=========== （front_page.php）PROFILEエリア ==========*/


#profile_area{
    width: 1024px;
    height: 512px;
    margin: 0 0 150px 0;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 959px) {
    #profile_area{
        max-width: 100%;
        height:auto;
    }
}
@media screen and (max-width: 599px) {
    #profile_area{
        max-width: 100%;
        height:auto;
    }
}

#profile{
    width:100%;
    overflow: hidden;
}


#profile li{
    float: left;
}

@media screen and (max-width: 599px) {
    #profile li{
        max-width: 100%;
        float: none;
    }
}

#profile .profile_img{
    width: 410px;
    margin-right:20px;
}


@media screen and (max-width: 599px) {
    #profile .profile_img{
        max-width:88%;
        margin: 0 auto 15px;
    }
}

#profile img {
    width:410px;
    height: auto;
    border-radius:25px;
}
@media screen and (max-width: 959px) {
    #profile img {
        max-width:100%;
    }
}

@media screen and (max-width: 599px) {
    #profile img {
        max-width:100%;
    }
}


#profile .profile_archive{
    width: 593px;
    font-size: 14px;
    color: #575757;
    line-height: 200%;
    margin: 10px 0 0 0;
}
@media screen and (max-width: 599px) {
    #profile .profile_archive{
        max-width:100%;
        text-align: center;
        margin: 0 auto;
    }
}

#profile .profile_name{
    font-size: 16px;
    font-weight: 500;
}


#profile .pr_outline{
    margin: 15px 0 0 0;
}
@media screen and (max-width: 599px) {
    #profile .pr_outline{
        text-align:left;
        margin: 15px 0 20px 0;
        padding: 0 10px;
    }
}

#profile .profile_more{
    width:210px;
    height: 25px;
    border: 1px solid #1d91d8;
    border-radius:60px;
    color: #1d91d8;
    font-size: 15px;
    margin: 15px 0 0 0;
    padding: 15px;
    text-align: center;
    text-decoration: none;
}
#profile .profile_more:hover {
    color: #fff;
    opacity: .7;
    background-color: #1d91d8;
}
@media screen and (max-width: 599px) {
    #profile .profile_more{
        max-width:88%;
        margin: 0 auto;
        padding: 15px;
    }

}
#profile a{ color:#383838;}
/*========================================================================================


▼▼▼▼▼▼▼▼▼以下よりpage_●●（個別ページ.php▼▼▼▼▼▼▼▼▼


========================================================================================*/


/*=============== （個別ページ）フローページ ===============*/

#flow_nav{
    width: 80%;
    margin: 0 auto;
    xletter-spacing: 0.1em;
}
@media screen and (max-width: 599px) {
    #flow_nav{
        width: 95%;
		margin:0 0 80px 0;
    }
}


#flow_nav h3{
    font-size: 16px;
}

#flow_nav p {
    display: block;
    font-size: 14px;
    margin: 0 0 20px 15px;
    line-height: 180%;
}

#flow_nav p a {
    color: #1D91D8;
    text-decoration: underline;
}

#flow_nav strong {
    font-size:16px;
    font-weight: bold;
}



/*=============== （個別ページ）コンタクトフォーム ===============*/


#contact_flow{
    width:540px;
    margin: 0 15%;
    display: inline-block;
}
@media screen and (max-width: 599px) {
    #contact_flow{
        width: 100%;
        font-size: 13px;
        margin: 0;
    }
}

#contact_flow li{
    width:auto;
    float:left;
    padding: 0 40px 0 0;
}

@media screen and (max-width: 599px) {
    #contact_flow li{
        padding: 0 ;
        margin:  0 19px 0 0;
        text-align: center;
    }
}


.proctag {
    width: 80px;
    background: #1D91D8;
    color: #fff;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    padding: 0 1em 0 1.5em;
    position: relative;
    z-index: -9999;
}
@media screen and (max-width: 599px) {
    .proctag {
        width: 70px;
        height: 40px;
        line-height: 40px;
        padding: 0 .2em 0 .2em;
    }
}
.proctag::before {
    border: 25px solid transparent;
    border-left-color: #1D91D8;
    border-right-width: 0;
    content: '';
    display: block;
    height: 0;
    position: absolute;
    right: -25px;
    top: 0;
    width: 0;
}
@media screen and (max-width: 599px) {
    .proctag::before {
        border: 20px solid transparent;
        border-left-color: #1D91D8;
        border-right-width: 0;
        content: '';
        right: -20px;
    }
}

.mw_wp_form_input ol li:nth-child(2) .proctag,
.mw_wp_form_input ol li:nth-child(3) .proctag {
    background: #73C3EA;
}

.mw_wp_form_preview ol li:nth-child(1) .proctag,
.mw_wp_form_preview ol li:nth-child(3) .proctag {
    background: #73C3EA;
}

.mw_wp_form_complete ol li:nth-child(1) .proctag,
.mw_wp_form_complete ol li:nth-child(2) .proctag {
    background: #73C3EA;
}

.mw_wp_form_input ol li:nth-child(2) .proctag::before,
.mw_wp_form_input ol li:nth-child(3) .proctag::before {
    border-left-color: #73C3EA;
}

.mw_wp_form_preview ol li:nth-child(1) .proctag::before,
.mw_wp_form_preview ol li:nth-child(3) .proctag::before {
    border-left-color: #73C3EA;
}

.mw_wp_form_complete ol li:nth-child(1) .proctag::before,
.mw_wp_form_complete ol li:nth-child(2) .proctag::before {
    border-left-color: #73C3EA;
}


/*======== [コンタクトページ：プライバシーポリシー] ========*/


#page_contact_ppbox{
    width:80%;
    height: 300px;
    border-radius: 20px;
    border: 1px solid #999999;
	padding:10px 10px 0 10px;
    margin: 20px 20% 0 0;
}
@media screen and (max-width: 959px) {
    #page_contact_ppbox{
        width: 100%;
    }
}



/*==============================

コンタクトフォームCSS

==============================*/


.privacy_link{
    font-size:14px;
    display: block;
    text-align: center;
    margin: 30px 0
}

.privacy_link a{
    color:#1D91D8;
    text-decoration: underline;
}

span.required {
    font-size: 8pt;
    padding: 7px;
    background: #73C3EA;
    color: #fff;
    border-radius: 7px;
    margin-left: 10px;
    vertical-align: middle;
}
@media screen and (max-width: 599px) {
    span.required {
        font-size: 7pt;
        padding: 3px;
    }
}

.submit-btn input,
.mw_wp_form_preview input[name="submitBack"] {
    width: 60%;
    margin: 30px 10%;
    display: block;
    border: 1px #1d91d8 solid;
    border-radius: 35px;
    text-align: center;
    padding: 22px;
    color: #1d91d8;
	background:#FFF;
   font-size: 18px;
   font-weight: 300;
	line-height:0.1em
   cursor: pointer;
   transition: all 0.4s ease;
}
@media screen and (max-width: 959px) {
    .submit-btn input,
    .mw_wp_form_preview input[name="submitBack"] {
        width: 80%;
    }
}

.submit-btn input:hover,
.mw_wp_form_preview input[name="submitBack"]:hover {
    background: #1d91d8;
    color: #fff;
}

.mw_wp_form {
    width: 80%;
    margin: 0 auto;
    padding-left: 15%;
}
@media screen and (max-width: 959px) {
    .mw_wp_form {
        padding: 0;
    }
}
@media screen and (max-width: 599px) {
    .mw_wp_form {
        width: 95%;
    }
}

.mw_wp_form #form-content {
    margin-top: 50px;
}

.mw_wp_form .item.flex {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 80%;
    margin-bottom: 40px;
}
@media screen and (max-width: 959px) {
    .mw_wp_form .item.flex {
        width: 100%;
    }
}
@media screen and (max-width: 599px) {
    .mw_wp_form .item.flex {
        display: block;
        margin-bottom: 20px;
    }
}



.mw_wp_form .label {
    width: 35%;
}
@media screen and (max-width: 599px) {
    .mw_wp_form .label {
        width: 100%;
        font-size: 80%;
        padding: 5px;
    }
}
.mw_wp_form .input {
    width: 65%;
}
@media screen and (max-width: 599px) {
    .mw_wp_form .input {
        width: 100%;
    }
}
.mw_wp_form input[type="text"],
.mw_wp_form input[type="email"],
.mw_wp_form textarea {
    width: 80%;
    padding: 5px;
    border: 1px solid #999999;
    border-radius: 11px;
}
@media screen and (max-width: 599px) {
    .mw_wp_form input[type="text"],
    .mw_wp_form input[type="email"],
    .mw_wp_form textarea {
        width: 95%;
    }
}
.mw_wp_form .mwform-radio-field-text {
    font-size: 75%;
    font-weight: bold;
}


/*=============== （個別ページ）プライバシーポリシー ===============*/

#page_privacypolicy {
    font-size: 75%;
    width: 97%;
    height: 95%;
    line-height: 210%;
    margin: 10px auto;
    overflow-y: scroll;
}

#page_privacypolicy .page_privacy_h3{
    font-size: 16px;
    color: #1D91D8;
    font-weight: bold;
    margin: 20px 0 7px 0;
}

#page_privacypolicy .page_privacy_li  li{
    padding-left:10px;

}


/*=============== 404エリア ===============*/
.error404 h2 {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
}
.error404 #information {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}
.error404 .detail {
    width: 40%;
    text-align: center;
}
.error404 figure {
    width: 50%;
}
.error404 figure img {
    width: 100%;
}





/*=============== footer.phpエリア ===============*/

#footer{
    width:100%;
}


#contact_cover{
    background: url("../image/fotter_image.png");
    background-size: cover;
    width: 100%;
    height: 315px;
}
@media screen and (max-width: 599px) {
    #contact_cover{
        width: 100%;
        max-height: 315px;
    }
}

#contact_info{
    width:100%;
    padding-top: 1px;
}

@media screen and (max-width: 599px) {
    #contact_info{
        width: 95%;
        height: 360px;
        margin: 0 auto;
    }
}

#contact_info .contant_jpn{
    font-size: 20px;
    font-weight: normal;
    color:#FFF;
    letter-spacing: 0.2em;
    text-align: center;
    margin: 20px 0 0 0;
    padding: 0;
    border: none;
}
#contact_info .contant_jpn span {
    position: relative;
    font-size: 40px;
    letter-spacing: 0.3em;
}

#contact_info .contant_jpn span::after{
    position: absolute;
    content: "";
   border-bottom: 2px solid #FFF;
   width: 160px;
   margin: 15px auto 2px;
    bottom: -10px;
    left: 60px;
}

@media screen and (max-width: 599px) {
    #contact_info .contant_jpn{
        font-size:22px;
    }

    #contact_info  .contant_jpn::before{
        font-size:30px;
    }
}


#contact_info .contant_mess{
    margin: 20px 0 0 0;
    color: #FFF;
    font-size:16px;
    text-align: center;
    line-height: 190%;
}
#contact_info .contant_mess br {
    display: none;
}
#contact_info .contant_mess br.block {
    display: block;
}

@media screen and (max-width: 599px) {
    #contact_info .contant_mess{
        margin: 15px 0 0 0;
        font-size:14px;
        line-height: 170%;
    }
    #contact_info .contant_mess br {
        display: block;
    }
}


#contact_info .tooter_cntbtn {
    width:450px;
    height: 45px;
    color: #FFF;
    border: 1px solid #FFF;
    border-radius: 30px;
    margin: 40px auto 0;
    font-size: 19px;
    font-weight:300;
    text-align: center;
    letter-spacing: 0.1em;
    padding: 15px 0 0 0;
    display: block;
}
#contact_info .tooter_cntbtn:hover {
    color: #1d91d8;
    xopacity: .7;
    background-color: #FFF;
}

@media screen and (max-width: 599px) {
    #contact_info .tooter_cntbtn{
        width:88%;
        height: 35px;
        padding: 13px 0 10px 0;
        margin-top: 20px;
    }
}



/*=========== アンダーライン ==========*/


#footer_cover{
    margin-top: 110px;
    width: 100%;
    background: #F9DE58;
    border-radius:30px 30px 0 0;
}

@media screen and (max-width: 599px) {
    #footer_cover{
        width: 100%;
    }
}


#footer_cover .copylight{
    font-size: 13px;
    text-align: right;
    color: #646363;
    padding :0 50px 10px 0;
}

#footer_cover .top_arrow {
    width: 50px;
    height: 50px;
    border-radius:50px;
    background: #F9DE58;
    border: 1px solid #F9DE58;
    position: relative;
    top:-20px;
    left: 48%;
}

@media screen and (max-width: 959px) {
    #footer_cover .top_arrow {
        width: 50px;
        height: 50px;
        border-radius:50px;
        background: #F9DE58;
        border: 1px solid #F9DE58;
        position: relative;
        top:-20px;
        left: 47%;
    }
}

@media screen and (max-width: 595px) {
    #footer_cover .top_arrow {
        left: 42%;
    }
}


#footer_cover img{
    display: block;
    width: 20px;
    height: 20px;
    margin: 12px 0 5px 15px;
}

@media screen and (max-width: 595px) {
    #footer_cover img{
        display: block;
        width: 15px;
        height: 15px;
        margin: 10px 0 5px 17px;
    }
}


/*========================================================================================


▼▼▼▼▼▼▼▼▼以下より全ページ共通 ナビゲーションボタン・エリア▼▼▼▼▼▼▼▼▼


========================================================================================*/

/*=============== （ポップアップナビゲーション）ナビゲーションのためのCSS ===============*/


#ouerbtn{
    width:40px;
    top:30px;
    right: 20px;
    position: fixed;
}

#ouerbtn .cnt_btn{
    width: 40px;
    height: 40px;
    z-index: 9999;/*ボタンを最前面に*/
    position: fixed;
    padding: 10px 0 0 0;
}


#gnav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    top:-120%;
    left:0;
    width:100%;
    height: 100vh;/*ナビの高さ*/
    background: rgba(133,209,221,0.8);
    /*動き*/
    transition: all 0.8s;
}


/*アクティブクラスがついたら位置を0に*/

#gnav.panelactive{/*▶︎これでナビのポップイベントが始まる◀︎*/
    top: 0;
}

/*ナビゲーションの縦スクロール*/
#gnav.panelactive #gnav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#gnav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 8000;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#gnav li{
    list-style: none;
    text-align: center;
}

#gnav li a{
    color: #FFF;
    text-decoration: none;
    padding:10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
}


/*========= ボタンのためのCSS ===============*/
.openbtn1{
    position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
    top:40px;
    right: 65px;
    cursor: pointer;
    width: 40px;
    height:40px;
    background: #1D91D8;
}

/*クリック時のアニメーション*/
.openbtn1 span{
    display: inline-block;
    transition: all .3s;
    position: absolute;
    left: 10px;
    height: 1px;
    border-radius: 2px;
    background-color: #FFF;
    width: 50%;
}


/*ボーターの位置*/
.openbtn1 span:nth-of-type(1) {
    top:13px;
}

.openbtn1 span:nth-of-type(2) {
    top:20px;
}

.openbtn1 span:nth-of-type(3) {
    top:27px;
}

/*ボーターの位置(バツになる時）*/
.openbtn1.active span:nth-of-type(1) {
    top: 12px;
    left: 10px;
    transform: translateY(8px) rotate(-45deg);
    width: 50%;
}

.openbtn1.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 26px;
    left: 10px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}