@charset "UTF-8";
/* 変数 */
/* 共通変数 */
/* 共通変数 */
/* ミックスイン */
/* 共通ミックスイン */
/* 共通mixin */
/* css */
/*----------------------------------------------------
banner
----------------------------------------------------*/
#banner { width: 100%; position: relative; max-width: 1920px; margin: 0 auto 250px; }
@media screen and (max-width: 768px) { #banner { margin-bottom: 160px; } }
#banner div.back { width: 80%; max-width: 1460px; position: absolute; top: 15%; right: 0; }
#banner ul.slider { width: 80%; max-width: 1460px; }

/*----------------------------------------------------
about
----------------------------------------------------*/
#about { width: 100%; padding: 100px 0 185px; background: #a7d7f2; }
@media screen and (max-width: 768px) { #about { padding: 80px 0 140px; } }
#about .a_inner { width: 1000px; margin: 0 auto 0px; position: relative; }
@media screen and (max-width: 768px) { #about .a_inner { width: 100%; margin: 0 auto 0px; padding: 0 5px; } }
#about .a_inner .main_ttl { top: -185px; text-align: right; }
@media screen and (max-width: 768px) { #about .a_inner .main_ttl { top: -137px; } }
#about .a_inner .main_ttl span { color: #a7d7f2; font-family: "游ゴシック Medium", "YuGothic M", YuGothic, "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
#about .a_inner p { width: 800px; margin: 0 auto; }
@media screen and (max-width: 768px) { #about .a_inner p { width: 100%; margin: 0 auto 0px; max-width: auto; text-align: justify; } }

/*----------------------------------------------------
service
----------------------------------------------------*/
#service { width: 1000px; margin: 0 auto 0px; padding: 100px 0 220px; position: relative; }
@media screen and (max-width: 768px) { #service { width: 100%; margin: 0 auto 0px; max-width: auto; padding: 80px 5px 180px; } }
#service .main_ttl span { color: #ffffff; font-family: "游ゴシック Medium", "YuGothic M", YuGothic, "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
#service ul { width: 100%; margin-bottom: 25px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
@media screen and (max-width: 768px) { #service ul { max-width: 300px; margin: 0 auto; } }
#service ul li { width: 300px; margin-bottom: 50; }
@media screen and (max-width: 768px) { #service ul li { width: 100%; max-width: 300px; margin-bottom: 70px; }
  #service ul li:last-child { margin-bottom: 0; } }
#service ul li p.img { width: 300px; height: 300px; border: 3px solid #3e549d; border-radius: 50%; position: relative; margin-bottom: 50px; }
#service ul li p.img.img_01 { background: url(../img/service_01.jpg) center no-repeat; background-size: cover; }
#service ul li p.img.img_02 { background: url(../img/service_02.jpg) center no-repeat; background-size: cover; }
#service ul li p.img.img_03 { background: url(../img/service_03.jpg) center no-repeat; background-size: cover; }
#service ul li p.img.img_04 { background: url(../img/service_04.jpg) center no-repeat; background-size: cover; }
#service ul li p.img.img_05 { background: url(../img/service_05.jpg) center no-repeat; background-size: cover; }
#service ul li p.img.img_06 { background: url(../img/service_06.jpg) center no-repeat; background-size: cover; }
#service ul li p.img span { position: absolute; bottom: -85px; left: 0; font-size: 120px; font-family: "Niconne", cursive; color: rgba(62, 84, 157, 0.5); }
#service ul li h3 { font-size: 20px; font-weight: 900; font-family: "游ゴシック Medium", "YuGothic M", YuGothic, "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center; /*-webkit-text-stroke: 1px black;*/ margin-bottom: 30px; }
#service ul li h3 + p { text-align: justify; }

/*----------------------------------------------------
company
----------------------------------------------------*/
#company { width: 100%; background: #a7d7f2; padding: 100px 0 185px; }
@media screen and (max-width: 768px) { #company { padding: 80px 0 140px; } }
#company .c_inner { width: 1000px; margin: 0 auto 0px; position: relative; }
@media screen and (max-width: 768px) { #company .c_inner { width: 100%; margin: 0 auto 0px; padding: 0 5px; } }
#company .c_inner .main_ttl { top: -220px; text-align: right; }
@media screen and (max-width: 768px) { #company .c_inner .main_ttl { top: -165px; } }
#company .c_inner .main_ttl span { color: #a7d7f2; line-height: 120px; font-family: "游ゴシック Medium", "YuGothic M", YuGothic, "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
@media screen and (max-width: 768px) { #company .c_inner .main_ttl span { line-height: 87px; } }
#company .c_inner table { width: 800px; margin: 0 auto 75px; }
@media screen and (max-width: 768px) { #company .c_inner table { width: 100%; margin: 0 auto 65px; max-width: auto; } }
#company .c_inner table tr { border-top: 1px solid #888888; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; padding: 30px; position: relative; }
@media screen and (max-width: 768px) { #company .c_inner table tr { width: 100%; display: block; padding: 15px; border-top: none; border-left: 1px solid #888888; border-right: 1px solid #888888; }
  #company .c_inner table tr:first-child:before { display: none; } }
#company .c_inner table tr:before { content: ''; position: absolute; width: 1px; height: calc(100% - 20px); left: 170px; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #888888; }
@media screen and (max-width: 768px) { #company .c_inner table tr:before { width: calc(100% - 20px); height: 1px; top: 0; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } }
#company .c_inner table tr:last-child { border-bottom: 1px solid #888888; }
@media screen and (max-width: 768px) { #company .c_inner table tr:last-child { border-bottom: none; } }
#company .c_inner table tr th { width: 100px; margin-right: 100px; }
@media screen and (max-width: 768px) { #company .c_inner table tr th { width: 100%; margin-bottom: 5px; display: block; margin-right: 0; text-align: left; font-weight: bold; } }
@media screen and (max-width: 768px) { #company .c_inner table tr td { width: 100%; display: block; } }
#company .c_inner .g_map { width: 100%; margin: 0 auto; }
@media screen and (max-width: 768px) { #company .c_inner .g_map iframe { width: 100%; height: 300px; } }

/*----------------------------------------------------
contact
----------------------------------------------------*/
#contact { width: 100%; background: #ffffff; padding: 100px 0; }
@media screen and (max-width: 768px) { #contact { padding: 80px 0 40px; } }
#contact .c_inner { width: 1000px; margin: 0 auto 0px; position: relative; }
@media screen and (max-width: 768px) { #contact .c_inner { width: 100%; margin: 0 auto 0px; padding: 0 5px; } }
#contact .c_inner .main_ttl { top: -185px; text-align: left; }
@media screen and (max-width: 768px) { #contact .c_inner .main_ttl { top: -135px; } }
#contact .c_inner .main_ttl span { color: #ffffff; font-family: "游ゴシック Medium", "YuGothic M", YuGothic, "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
#contact .c_inner p { width: 700px; margin: 0 auto 50px; }
@media screen and (max-width: 768px) { #contact .c_inner p { width: 100%; margin: 0 auto 50px; max-width: 700px; } }
#contact .c_inner form { width: 700px; margin: 0 auto; }
@media screen and (max-width: 768px) { #contact .c_inner form { width: 100%; margin: 0 auto 0px; max-width: 700px; } }
#contact .c_inner form table { margin-bottom: 50px; }
@media screen and (max-width: 768px) { #contact .c_inner form table { width: 100%; margin: 0 auto 40px; max-width: auto; } }
#contact .c_inner form table tr { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 25px 0; }
@media screen and (max-width: 768px) { #contact .c_inner form table tr { display: block; padding: 10px 0; } }
#contact .c_inner form table tr th { width: 250px; padding-top: 15px; }
@media screen and (max-width: 768px) { #contact .c_inner form table tr th { width: 100%; margin-bottom: 5px; padding: 0; display: block; } }
#contact .c_inner form table tr td { width: 450px; }
@media screen and (max-width: 768px) { #contact .c_inner form table tr td { width: 100%; display: block; } }
#contact .c_inner form table tr td input[type="text"], #contact .c_inner form table tr td textarea { width: 450px; padding: 15px 10px; border: none; background: #e9e9e9; }
@media screen and (max-width: 768px) { #contact .c_inner form table tr td input[type="text"], #contact .c_inner form table tr td textarea { width: 100%; } }
#contact .c_inner form #btn_center { width: 500px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
@media screen and (max-width: 768px) { #contact .c_inner form #btn_center { width: 100%; max-width: 200px; display: block; } }
#contact .c_inner form #btn_center input { width: 200px; line-height: 50px; border: 1px solid #3e549d; background: #3e549d; color: #ffffff; cursor: pointer; -moz-transition: ease-in-out 0.5s; -o-transition: ease-in-out 0.5s; -webkit-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; font-weight: bold; letter-spacing: 3px; }
#contact .c_inner form #btn_center input:hover { background: #ffffff; color: #3e549d; }
@media screen and (max-width: 768px) { #contact .c_inner form #btn_center input { margin-bottom: 40px; } }

/*----------------------------------------------------
confirm
----------------------------------------------------*/
#confirm { width: 800px; margin: 0 auto 100px; }
@media screen and (max-width: 768px) { #confirm { width: 100%; margin: 0 auto 80px; padding: 0 5px; padding-top: 100px; } }
#confirm p { text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 50px; }
@media screen and (max-width: 768px) { #confirm p { font-size: 16px; margin-bottom: 40px; } }
#confirm table { width: 800px; margin: 0 auto 75px; }
@media screen and (max-width: 768px) { #confirm table { width: 100%; margin: 0 auto 50px; max-width: auto; } }
#confirm table tr { border-top: 1px solid #cccccc; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; padding: 15px; position: relative; }
@media screen and (max-width: 768px) { #confirm table tr { width: 100%; display: block; padding: 15px; border-top: none; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; }
  #confirm table tr:first-child:before { display: none; } }
#confirm table tr:before { content: ''; position: absolute; width: 1px; height: calc(100% - 20px); left: 170px; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #cccccc; }
@media screen and (max-width: 768px) { #confirm table tr:before { width: calc(100% - 20px); height: 1px; top: 0; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } }
#confirm table tr:last-child { border-bottom: 1px solid #cccccc; }
@media screen and (max-width: 768px) { #confirm table tr:last-child { border-bottom: none; } }
#confirm table tr th { width: 100px; margin-right: 100px; }
@media screen and (max-width: 768px) { #confirm table tr th { width: 100%; margin-bottom: 5px; display: block; margin-right: 0; text-align: left; font-weight: bold; } }
@media screen and (max-width: 768px) { #confirm table tr td { width: 100%; display: block; } }
#confirm .submit_btn { width: 500px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
@media screen and (max-width: 768px) { #confirm .submit_btn { width: 100%; max-width: 200px; display: block; } }
#confirm .submit_btn input { width: 200px; line-height: 50px; border: 1px solid #3e549d; background: #3e549d; color: #ffffff; cursor: pointer; -moz-transition: ease-in-out 0.5s; -o-transition: ease-in-out 0.5s; -webkit-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; font-weight: bold; letter-spacing: 3px; }
#confirm .submit_btn input:hover { background: #ffffff; color: #3e549d; }
@media screen and (max-width: 768px) { #confirm .submit_btn input { margin-bottom: 40px; } }

/*----------------------------------------------------
error
----------------------------------------------------*/
#formWrap { width: 100%; }
#formWrap h4 { padding-top: 50px; font-size: 18px; font-weight: bold; margin-bottom: 60px; }
@media screen and (max-width: 768px) { #formWrap h4 { font-size: 16px; padding-top: 100px; margin-bottom: 40px; } }
#formWrap p.error_messe { margin-bottom: 30px; }
@media screen and (max-width: 768px) { #formWrap p.error_messe { margin-bottom: 20px; } }
#formWrap input { width: 200px; line-height: 50px; border: 1px solid #3e549d; background: #3e549d; color: #ffffff; cursor: pointer; -moz-transition: ease-in-out 0.5s; -o-transition: ease-in-out 0.5s; -webkit-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; font-weight: bold; letter-spacing: 3px; margin-bottom: 100px; }
#formWrap input:hover { background: #ffffff; color: #3e549d; }
@media screen and (max-width: 768px) { #formWrap input { margin-bottom: 40px; } }