@charset "utf-8";


.linktxt a:link { color: #0000ff; }
.linktxt a:visited { color: #000080; }
.linktxt a:hover { color: #ff0000; }
img {width: 100%;height: auto;vertical-align: bottom;}
a img {transition: all 0.5s;}
a:hover img {opacity: 0.7;}


/*****************************************************/

article {
/*  just a fancy border  */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 10px;
}


/*****************************************************/

.active{
    display: block !important;
}
.fade{
    display: none;
}

br.sp{
    display: none;
}
@media(max-width:768px) {
    br.sp{
        display: block;
    }
}


html,
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}
body {
	font-family:-apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
               'Helvetica Neue',            /* Macの欧文 (OS X 10.10以前) */
               'Segoe UI',                  /* Windowsの欧文 */
               'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */
               Meiryo,                      /* Windowsのメイリオ */
               sans-serif;
	font-weight: 500;
	font-size: 100%;
	line-height: 1.6em;
	letter-spacing: 0.1em;
	color: #333333;
}
h1,h2,h3 {
    color: #000;
}
ul {margin: 0;padding: 0;list-style: none;}
/* CSS Document */
.pc {display: block;}
.sp {display: none;}
.special_content {
	width: 100%;
	padding: 0;
	margin: 0;
}
.special_content img {max-width: 100%;}
.mv {width: 100%;position: relative;}
.mv .mv01 {width: 100%;height: auto;}
.mv .logo {position: absolute;left:1rem;top:1rem;width: 121px;}
.mv .mv_txt {position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);text-align: center;}
.txt01 {width: 537px;height: auto;margin: 0 auto 24px;}
.txt02 {width: 542px;height: auto;margin: 0 auto 24px;}
.txt03 {width: 344.5px;height: auto;margin: 0 auto 24px;}
.txt04 {width: 194px;height: auto;margin: 0 auto 60px;}
.txt05 {width: 366px;height: auto;margin: 0 auto;}
.wrap {
    width: 100%;
    background-image: url(../img/bk.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}
.wrap .in {width: 950px;margin-left: auto;margin-right: auto;padding-bottom: 100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.sec01 {position: relative;padding-top: 70px;margin-bottom: 55px}
.txt06 {width: 408.5px;height: auto;margin: 0 0 24px;}
.txt07 {width: 410.5px;height: auto;margin: 0 0 40px;}
.txt08 {width: 690px;height: auto;margin: 0 0 35px;padding-bottom: 30px;border-bottom: solid 1px #333;}
.txt08 img{width: 390px;height: auto;}
.txt09 {width: 605px;height: auto;position: relative;}
.txt09 .txt10 {width: 101px;height: auto;position: absolute;left: 400px;bottom: 0;}
.img01 {width: 583px;height: auto;position: absolute;top:16px;right: -130px;}

.sec02 {margin-bottom: 55px;}
.sec02 ul {display: flex;flex-wrap: wrap;justify-content: space-between;}
.sec02 ul li {width: 31%;}
.sec03 {margin-bottom: 60px;}
.txt15 {width: 556.5px;margin: 0 auto 40px; }
.txt16 {width: 715.5px;margin: 0 auto 0;}

.contact_box {
    width: 85.26%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 88px;
    background-color: rgba(255,255,255,0.70);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
}
.contact_box .contact_in {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #B0BF24;
	padding-left: 25px;
	padding-right: 25px;
}
.contact_box .contact_in .contact_t {width:249px;margin: 0 auto;padding-top:30px;padding-bottom: 30px; }
.contact_box .contact_in ul {width: 100%;display: flex;flex-wrap: wrap;justify-content: flex-end;}
.contact_box .contact_in ul li {
	width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	padding: 20px 20px 35px;
}
.contact_box .contact_in ul li a:hover img {opacity: 0.7;transition: all 0.5s;}

.access {width: 100%;}
.access .access_t {width: 100%;height: 300px;display: flex;justify-content: center;align-items: center;background-image: url("../img/access_bk.jpg");background-size: cover;}
.access .access_t img {width: 117px;}
.access .col2 {width: 100%;display: flex;flex-wrap: wrap;}
.access .col2 .col2_l {width: 50%;padding: 0;}
.access .col2 .col2_r {
	width: 50%;
	padding: 0;
	display: flex;
	align-items: center;
}
.access .col2 .col2_r .in {
	width:50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	padding-left: 160px;
	padding-top: 56px;
}
.map #map_sapporo {
    height: 400px;
}
.txt12 {width: 144.5px;margin-bottom: 32px;}
.txt13 {width: 228px;margin-bottom: 24px;}
.txt14 {width: 310.5px;margin-bottom: 24px;}
.btn_mail {width: 312px;}
.btn_mail a {display: block;}
.btn_mail a:hover img {opacity: 0.7;transition: all 0.5s;}

footer {background-color: #333;text-align: center;padding: 8px 0;}
footer img {width: 248.5px;}

@media screen and (max-width:768px) {
.pc {display: none;}
.sp {display: block;}
.mv .logo {position: absolute;left:1rem;top:1rem;width:20%;}
.mv .mv_txt {position: absolute;top:50%;left:0%;transform: translate(0%,-50%);text-align: center;width: 100%;}
.txt01 {width: 70%;height: auto;margin: 0 auto 0px;}
.txt02 {width: 90%;height: auto;margin: 0 auto 8px;}
.txt03 {width: 80%;height: auto;margin: 0 auto 24px;}
.txt04 {width: 50%;height: auto;margin: 0 auto 0px;}
.txt05 {width:90%;height: auto;margin: 40px auto 0;position: relative;}
	.img01_01 {position: absolute;width: 23%;left: -3%;top:-85px;}
	.img01_02 {position: absolute;width: 20%;left: 0%;bottom:10px;}
	.img01_03 {position: absolute;width: 23%;right: -3%;bottom:-10px;}
.wrap {
    width: 100%;
    background-image: url(../img/bk_sp.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}
	.wrap .in {width: 90%;margin-left: auto;margin-right: auto;padding-bottom: 0;overflow: hidden;}
.sec01 {position: relative;padding-top: 70px;margin-bottom: 55px}
.txt06 {width: 100%;height: auto;margin: 0 0 24px;}
.txt07 {width: 100%;height: auto;margin: 0 0 40px;}
.txt08 {width: 100%;height: auto;margin: 0 0 35px;padding-bottom: 30px;border-bottom: solid 1px #333;}
.txt08 img{width: 390px;height: auto;}
.txt09 {width: 100%;height: auto;position: relative;}
.txt09 .txt10 {width: 101px;height: auto;position: absolute;left:auto;right: 0;bottom: 0;}
.img01 {width: 583px;height: auto;position: absolute;top:16px;right: -130px;}

.sec02 {margin-bottom: 55px;}
.sec02 ul {display: flex;flex-wrap: wrap;justify-content: center;}
.sec02 ul li {width: 48%;margin: 0 1% 2%;}
.sec03 {margin-bottom: 60px;}
.txt15 {width: 90%;margin: 0 auto 40px; }
.txt16 {width: 100%;margin: 0 auto 0;}
	
	
.contact_box {
    width: 100%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 40px;
    background-color: rgba(255,255,255,0.70);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
}
	.contact_box .contact_in  {padding: 5%;}
.contact_box .contact_in .contact_t {width:60%;margin: 0 auto;padding: 0;}
.contact_box .contact_in ul {width: 100%;display:block;}
.contact_box .contact_in ul li {
	width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	padding: 5%;
}
.access .access_t {width: 100%;height: 300px;display: flex;justify-content: center;align-items: center;background-image: url("../img/access_bk_sp.jpg");background-size: cover;}
.access .access_t img {width: 117px;}
.access .col2 {width: 100%;display:block;}
.access .col2 .col2_l {width: 100%;padding: 0;}
.access .col2 .col2_r {
	width: 90%;
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: center;
}
.access .col2 .col2_r .in {
	width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	padding-left:0px;
	padding-top: 32px;
	padding-bottom: 32px;
}
.map #map_sapporo {
    height: 400px;
}
.txt12 {width: 50%;margin:0 auto 32px;}
.txt13 {width: 90%;margin:0 auto 24px;}
.txt14 {width: 90%;margin:0 auto 24px;}
.btn_mail {width: 90%;margin:0 auto 0;}
.btn_mail a {display: block;}
.btn_mail a:hover img {opacity: 0.7;transition: all 0.5s;}
}