@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }

html {
line-height: 1; }

ol, ul {
list-style: none; }

table {
border-collapse: collapse;
border-spacing: 0; }

caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }

q, blockquote {
quotes: none; }
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }

a img {
border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }

/*-------------------------
common
-------------------------*/
html {
font-size: 62.5%; }

body {
font-family: "游明朝", "Yu Mincho", "YuMincho", serif;
font-weight: 600;
font-style: normal;
line-height: 1.8;
color: #000;
font-size: 16px;
font-size: 1.6rem; }

img {
vertical-align: top;
max-width: 100%; }

/*-------------------------
base
-------------------------*/
@media screen and (max-width: 1060px) {
.osechi_wrapper {
width: auto; } }

/*-------------------------
visual
-------------------------*/
.visual {
width: 1060px;
margin: 0 auto; }
@media screen and (max-width: 1060px) {
.visual {
width: auto; } }
.visual img {
width: 100%; }
.visual img.sp {
display: none; }
@media screen and (max-width: 747px) {
.visual img.sp {
display: inline; } }
@media screen and (max-width: 747px) {
.visual img.pc {
display: none; } }

/*-------------------------
container
-------------------------*/
.osechi_container {
padding: 80px 0; }
@media screen and (max-width: 1060px) {
.osechi_container {
padding: 20px; } }
@media screen and (max-width: 747px) {
.osechi_container {
padding: 10px 10px 20px; }
.osechi_container + .osechi_container {
padding-top: 20px; } }
.osechi_container .osechi_inner {
width: 1060px;
margin: 0 auto;
padding:80px;
box-sizing: border-box;
position: relative;}


/*
.right_back {position: relative;}
.right_back:before {
  content: '';
  display: inline-block;
  width: 700px;
  height: 700px;;
  background-image: url(../images/footer.png);
  background-size: contain;
  vertical-align: middle;
  position: absolute;right: 0;bottom: 0;
}
*/

@media screen and (max-width: 1060px) {
.osechi_container .osechi_inner {
width: auto;
padding: 40px; }

.osechi_container .right_back {padding: 40px 40px 0;}



}
@media screen and (max-width: 747px) {
.osechi_container .osechi_inner {
padding: 10px; }

.osechi_container .right_back {padding: inherit;}


}


.osechi_container .osechi_inner + .osechi_inner {
margin-top: 160px; }
@media screen and (max-width: 1060px) {
.osechi_container .osechi_inner + .osechi_inner {
margin-top: 40px; } }
.osechi_container-first {
background: url(../images/block1.jpg) repeat; }
@media screen and (max-width: 747px) {
.osechi_container-first {
background-size: 400px 400px; } }
.osechi_container-first .osechi_inner {
background: url(../images/back01.gif) repeat; }
@media screen and (max-width: 747px) {
.osechi_container-first .osechi_inner {
background-size: 200px 200px; } }
.osechi_container-first .osechi_inner-hokkaido {
background: url(../images/back02.gif) repeat; }
@media screen and (max-width: 747px) {
.osechi_container-first .osechi_inner-hokkaido {
background-size: 200px 200px; } }
.osechi_container-second {
background: url(../images/block2.gif) repeat; }
@media screen and (max-width: 747px) {
.osechi_container-second {
background-size: 80px 210px; } }
.osechi_container-second .osechi_inner {
background: url(../images/back03.gif) repeat; }
@media screen and (max-width: 747px) {
.osechi_container-second .osechi_inner {
background-size: 216.5px 200px; } }
.osechi_container .sec {
position: relative;
margin: 0 0 20px 0;
padding: 80px 0 0 0; }
@media screen and (max-width: 1060px) {
.osechi_container .sec {
padding-top: 40px; } }
@media screen and (max-width: 747px) {
.osechi_container .sec {
width: 98%;
margin: 0 auto 20px;

padding-top: 20px; } }
.osechi_container .sec h3 {
margin: 0 0 60px 0; }
@media screen and (max-width: 1060px) {
.osechi_container .sec h3 {
width: 30%; } }
@media screen and (max-width: 747px) {
.osechi_container .sec h3 {
width: 40%;
margin: 0 0 15px 0;
float: left;}
.osechi_container .sec h3 img {
width: 100%; } }
.osechi_container .sec .photo {
position: absolute;
display: block;
right: 0;
top: 60px; }
@media screen and (max-width: 1060px) {
.osechi_container .sec .photo {
max-width: 60%;
top: 40px; }

.osechi_container .sec .photo {
max-width: 60%;
top: 40px; }
.osechi_container .hokkaido .photo {
max-width: 45%;
top: 40px; }


}
@media screen and (max-width: 747px) {
.osechi_container .sec .photo {
position: static;
float: right;
max-width: 60%; } }
.osechi_container .sec ul {
margin: 0 -4px 20px;
font-size: 0; }
@media screen and (max-width: 1060px) {
.osechi_container .sec ul {
margin-top: -40px; } }
@media screen and (max-width: 747px) {
.osechi_container .sec ul {
clear: both;
text-align: center; } }
.osechi_container .sec ul li {
position: relative;
display: inline-block;
width: 93px;
height: 80px;
margin: 0 4px;
background: url(../images/icon.png) no-repeat;
background-size: cover;
text-align: center;
vertical-align: top; }

@media screen and (max-width: 1060px) {

.osechi_container .sec ul li {
width: 77px;
height: 66px;
margin: 0 2px 0 0;}

}


@media screen and (max-width: 747px) {
.osechi_container .sec ul li {
width: 70px;
height: 61px; } }
.osechi_container .sec ul li > span {
position: absolute;
display: block;
left: 0;
top: 50%;
width: 100%;
transform: translateY(-50%);
font-size: 18px;
font-size: 1.8rem;
line-height: 1; }
@media screen and (max-width: 747px) {
.osechi_container .sec ul li > span {
font-size: 16px;
font-size: 1.6rem; } }
.osechi_container .sec ul li > span span {
font-size: 22px;
font-size: 2.2rem; }
@media screen and (max-width: 747px) {
.osechi_container .sec ul li > span span {
font-size: 20px;
font-size: 2rem; } }
.osechi_container .sec a {
display: block;
background: #E11718;
line-height: 60px;
text-align: center;
font-size: 22px;
font-size: 2.2rem;
color: #fff;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight: bold;
text-decoration: none;
transition: 0.4s ease; }
.osechi_container .sec a:hover {
background: #ee5757; }
.osechi_container .sec > p {
position: relative;
z-index: 2;

font-size: 14px;}
.osechi_container .sec .price {
position: relative;
width: 510px;
margin: 15px 0 0 0;
font-size: 0;
line-height: 1; }
@media screen and (max-width: 1060px) {
.osechi_container .sec > p {
position: relative;
z-index: 2;

font-size: 1.4vw;}

.osechi_container .sec .price {
width: 65%; } }

@media screen and (max-width: 747px) {
.osechi_container .sec > p {
position: relative;
z-index: 2;
font-size: 3vw;}
.osechi_container .sec .price {
width: auto;
line-height: 1.2;
text-align: left; } }


.osechi_container .sec .price span {
display: inline-block;
width: 2em;
margin: 0 8px 0 0;
font-size: 14px;
font-size: 1.4rem;
line-height: 18px;
white-space: nowrap; }
.osechi_container .sec .price b {
font-size: 40px;
font-size: 4rem; }
.osechi_container .sec .price i {
font-size: 18px;
font-size: 1.8rem; }
@media screen and (max-width: 747px) {
.osechi_container .sec .price i {
font-size: 16px;
font-size: 1.6rem; } }
.osechi_container .sec .price br {
display: none; }
@media screen and (max-width: 1060px) {
.osechi_container .sec .price br {
display: block; } }
.osechi_container .sec .price .shipping {
position: absolute;
display: block;
right: -10px;
bottom: 5px; }
@media screen and (max-width: 747px) {
.osechi_container .sec .price .shipping {
right: 0;
left: auto;
top: auto;}
.osechi_container .sec .price .shipping img {
width: 80px; } }
@media screen and (max-width: 747px) {
.osechi_container .sec p br {
display: none; } }
.osechi_container .sec a {
position: absolute;
display: block;
right: 0;
bottom: 0;
width: 360px; }
@media screen and (max-width: 1060px) {
.osechi_container .sec a {
width: 30%; } }
@media screen and (max-width: 747px) {
.osechi_container .sec a {
position: static;
width: 100%;
margin-top: 20px; } }





h2#kyo {padding: 80px 0 0;}
@media screen and (max-width: 1060px) {
h2#kyo {padding: 40px 0 0;}
}

@media screen and (max-width: 747px) {
h2#kyo {padding:0;}
}




.osechi_container .yawaraka {
margin: 0;padding: 0;}
@media screen and (max-width: 1060px) {
.osechi_container .yawaraka {
margin: 0 -20px; } }
@media screen and (max-width: 747px) {
.osechi_container .yawaraka {
margin: 0;padding: 0; } }
.osechi_container .yawaraka h2 {
margin: 0 0 40px 0;
text-align: center; }
@media screen and (max-width: 1060px) {
.osechi_container .yawaraka h2 {
padding: 0 20px; } }
@media screen and (max-width: 747px) {
.osechi_container .yawaraka h2 {
margin: 0 0 20px;
padding: 0; } }
.osechi_container .yawaraka h2 img {
width: 100%; }
.osechi_container .yawaraka_inner {
padding: 40px 0 0;
display: flex;
justify-content: space-between; }
@media screen and (max-width: 1060px) {
.osechi_container .yawaraka_inner {
  padding: 0 0 40px;
}
}
@media screen and (max-width: 747px) {
.osechi_container .yawaraka_inner {
width: 98%;margin: auto;
display: block;
padding: 0;
}
.osechi_container .yawaraka_inner p{height: inherit;}

}



.osechi_container .yawaraka_inner + h2 {
margin-top: 80px; }
@media screen and (max-width: 1060px) {
.osechi_container .yawaraka_inner + h2 {
margin-top: 40px; } }
.osechi_container .yawaraka section {
position: relative;
width: 410px;
vertical-align: top; }
@media screen and (max-width: 1060px) {
.osechi_container .yawaraka section {
width: calc(50% - 40px);
margin: 0 20px; } }
@media screen and (max-width: 747px) {
.osechi_container .yawaraka section {
display: block;
width: auto;
margin: 0 0 20px 0; } }
.osechi_container .yawaraka section .photo {
margin-bottom: -10px; }
@media screen and (max-width: 1060px) {
.osechi_container .yawaraka section .photo {
width: 100%;margin: 0; } }


.osechi_container .yawaraka section .circle {
position: absolute;
display: block;
right: 0;
top: -20px;
width: 80px;
height: 80px;
border-radius: 62px;
background: #3F9124;
text-align: center;
color: #fff;
font-size: 28px;
font-size: 2.8rem;
line-height: 1; }

.osechi_container .yawaraka section .circle2 {
position: absolute;
display: block;
right: -20px;
top: -20px;
width: 80px;
height: 80px;
border-radius: 62px;
background: #5a2fdf;
text-align: center;
color: #fff;
font-size: 28px;
font-size: 2.8rem;
line-height: 1; }


.osechi_container .yawaraka section .circle_new {
position: absolute;
display: block;
right: 0;
top: -20px;
width: 80px;
height: 80px;
border-radius: 62px;
background-image: url("../images/new.png");
background-size: cover;
text-align: center;
color: #fff;
font-size: 28px;
font-size: 2.8rem;
line-height: 1; }



@media screen and (max-width: 1060px) {
.osechi_container .yawaraka section .circle {
width: 80px;
height: 80px;
top: -20px;
font-size: 19px;
font-size: 1.9rem; }
.osechi_container .yawaraka section .circle2 {
width: 80px;
height: 80px;
top: -20px;
right: 0;
font-size: 19px;
font-size: 1.9rem; }
.osechi_container .yawaraka section .circle_new {
width: 80px;
height: 80px;
top: -20px;
font-size: 19px;
font-size: 1.9rem;
background-image: url("../images/new.png");
background-size: cover;}

}
@media screen and (max-width: 747px) {
.osechi_container .yawaraka section .circle {
width: 60px;
height: 60px;
top: -10px; }
.osechi_container .yawaraka section .circle span {font-size: 3vw;}
.osechi_container .yawaraka section .circle2 {
top: -10px; }

.osechi_container .yawaraka section .circle_new {
width: 60px;
height: 60px;
top: -10px; 
background-image: url("../images/new.png");
background-size: cover;}
.osechi_container .yawaraka section .circle_new span {font-size: 3vw;}

}
.osechi_container .yawaraka section .circle span,
.osechi_container .yawaraka section .circle_new span{
font-size: 14px;
position: absolute;
display: block;
left: 0;
top: 50%;
width: 100%;
transform: translateY(-50%); }
.osechi_container .yawaraka section .circle2 span {
font-size: 14px;
position: absolute;
display: block;
left: 0;
top: 50%;
width: 100%;
transform: translateY(-50%); }


.osechi_container .yawaraka section h3 {
margin-top: 5px;
font-size: 32px;
font-size: 2.9rem;
letter-spacing: -0.05em; }
@media screen and (max-width: 1060px) {
.osechi_container .yawaraka section h3 {
position: relative;
z-index: 2;
margin: 15px 0;
font-size: 26px;
font-size: 2.6rem;
line-height: 1.4; }
 }
.osechi_container .yawaraka section h3 span {
font-size: 20px;
font-size: 2rem; }
@media screen and (max-width: 747px) {
.osechi_container .yawaraka section h3 {
letter-spacing: -0.06em;
}

.osechi_container .yawaraka section h3 span {
font-size: 16px;
font-size: 1.6rem; } }
.osechi_container .yawaraka section ul {
margin: 0 -4px 20px;
font-size: 0; }
@media screen and (max-width: 747px) {
.osechi_container .yawaraka section ul {
clear: both;
text-align: center; } }
.osechi_container .yawaraka section ul li {
position: relative;
display: inline-block;
width: 93px;
height: 80px;
margin: 0 4px;
background: url(../images/icon.png) no-repeat;
background-size: cover;
text-align: center;
vertical-align: top; }


@media screen and (max-width: 1060px) {
.osechi_container .yawaraka section ul li {
width: 77px;
height: 66px;
margin: 0 2px 0 0;}
}


@media screen and (max-width: 747px) {
.osechi_container .yawaraka section ul li {
width: 70px;
height: 61px; } }
.osechi_container .yawaraka section ul li > span {
position: absolute;
display: block;
left: 0;
top: 50%;
width: 100%;
transform: translateY(-50%);
font-size: 18px;
font-size: 1.8rem;
line-height: 1; }
@media screen and (max-width: 747px) {
.osechi_container .yawaraka section ul li > span {
font-size: 16px;
font-size: 1.6rem; } }
.osechi_container .yawaraka section ul li > span span {
font-size: 22px;
font-size: 2.2rem; }
@media screen and (max-width: 747px) {
.osechi_container .yawaraka section ul li > span span {
font-size: 20px;
font-size: 2rem; } }

.osechi_container .yawaraka section a {
display: block;
background: #E11718;
line-height: 60px;
text-align: center;
font-size: 22px;
font-size: 2.2rem;
color: #fff;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight: bold;
text-decoration: none;
transition: 0.4s ease; }
.osechi_container .yawaraka section a:hover {
background: #ee5757; }
.osechi_container .yawaraka section > p {
position: relative;
z-index: 2;
letter-spacing: -0.1em; 
font-size: 14px;
height: inherit;}
@media screen and (max-width: 1060px) {
.osechi_container .yawaraka section > p br {
display: none; } }
.osechi_container .yawaraka section .price {
position: relative;
margin: 15px 0 0 0;
font-size: 0;
line-height: 1; }
@media screen and (max-width: 747px) {
.osechi_container .yawaraka section .price {
line-height: 1.2; } }
.osechi_container .yawaraka section .price span {
display: inline-block;
width: 2em;
margin: 0 8px 0 0;
font-size: 14px;
font-size: 1.4rem;
line-height: 18px;
white-space: nowrap; }
.osechi_container .yawaraka section .price b {
font-size: 40px;
font-size: 4rem; }
.osechi_container .yawaraka section .price i {
font-size: 20px;
font-size: 2rem; }
@media screen and (max-width: 747px) {
.osechi_container .yawaraka section .price i {
font-size: 16px;
font-size: 1.6rem; } }
.osechi_container .yawaraka section .price br {
display: none; }
@media screen and (max-width: 1060px) {
.osechi_container .yawaraka section .price br {
display: block; } }
.osechi_container .yawaraka section .price .shipping {
position: absolute;
display: block;
right: -55px;
bottom: 5px; }
@media screen and (max-width: 1060px) {
.osechi_container .yawaraka section .price .shipping {
right: -30px; } }
@media screen and (max-width: 747px) {
.osechi_container .yawaraka section .price .shipping {
right: 0;
bottom: 0;
left: auto;
top: -7px;}
.osechi_container .yawaraka section .price .shipping img {
width: 80px; } }
@media screen and (max-width: 747px) {
.osechi_container .yawaraka section p {
height: auto !important;
font-size: 12px;} }
.osechi_container .yawaraka section .price {
margin: -5px 0 27px; }
.osechi_container .yawaraka section .price i {
font-size: 16px;
font-size: 1.6rem; }

.osechi_container .kyokobako .price .shipping {
bottom: -30px; }
@media screen and (max-width: 747px) {
.osechi_container .kyokobako .price .shipping {
bottom: 0;
right: 0;
left: auto;
top: -7px;
} }





.osechi_container .hokkaido {margin: 0 0 80px;padding: 40px 0 0;min-height: 300px; }
.osechi_container .hokkaido img.photo {position: absolute;right: 0;top: 0;}
@media screen and (max-width: 1060px) {
.osechi_container .hokkaido {margin: 0 20px 40px;padding:40px 0 0;min-height:inherit;min-height: 300px; }
.osechi_container .hokkaido:nth-of-type(1) {padding-bottom: 0;} }
@media screen and (max-width: 747px) {
.osechi_container .hokkaido {width: 98%; margin: 0 auto 20px;padding: 0;min-height: inherit; }
.osechi_container .hokkaido img.photo {position: inherit;right: inherit;top: inherit;width: 80%;margin: auto 10% 5% 10%;max-width: inherit;}
}


.osechi_container .hokkaido .price .shipping {
bottom: 0; }
@media screen and (max-width: 1060px) {
.osechi_container .hokkaido .price .shipping {
bottom: 0; } }
@media screen and (max-width: 747px) {
.osechi_container .hokkaido .price .shipping {
bottom: 0; } }







.osechi_container .jyoon {margin: 0 0 80px;padding: 40px 0 0;min-height: 360px; }
.osechi_container .jyoon img.photo {position: absolute;right: 0;top: 0;}
@media screen and (max-width: 1060px) {
.osechi_container .jyoon {margin: 0 20px 40px;padding:40px 0 0;min-height:inherit;min-height: 360px; }
.osechi_container .jyoon:nth-of-type(1) {padding-bottom: 0;} }
@media screen and (max-width: 747px) {
.osechi_container .jyoon {width: 98%; margin: 0 auto 20px;padding: 0;min-height: inherit; }
.osechi_container .jyoon img.photo {position: inherit;right: inherit;top: inherit;width: 80%;margin: auto 10% 5% 10%;max-width: inherit;}
}


.osechi_container .jyoon .price .shipping {
bottom: 0; }
@media screen and (max-width: 1060px) {
.osechi_container .jyoon .price .shipping {
bottom: 0; } }
@media screen and (max-width: 747px) {
.osechi_container .jyoon .price .shipping {
bottom: 0; } }







.osechi_container .osechi_inner-hokkaido .sec .photo {
position: static;
margin-top: -55px; }
@media screen and (max-width: 1060px) {
.osechi_container .osechi_inner-hokkaido .sec .photo {
max-width: initial;
width: 100%;
margin-top: -20px;
margin-bottom: 10px; } }

.osechi_inner-hokkaido .sec ul {
float: right;
margin-top: -40px; }
@media screen and (max-width: 1060px) {
.osechi_inner-hokkaido .sec ul {
margin-top: 0; } }
@media screen and (max-width: 747px) {
.osechi_inner-hokkaido .sec ul {
float: none;
bottom: 0; } }







.sec .circle {
position: absolute;
display: block;
right: 380px;
left: auto;
top: 40px;
width: 80px;
height:80px;
border-radius: 62px;
background: #3F9124;
text-align: center;
color: #fff;
font-size: 28px;
font-size: 2.8rem;
line-height: 1; }

.sec .circle_left {
position: absolute;
display: block;
right: 380px;
left: auto;
top: 0;
width: 80px;
height:80px;
border-radius: 62px;
background: #3F9124;
text-align: center;
color: #fff;
font-size: 28px;
font-size: 2.8rem;
line-height: 1; }


.sec .circle_new {
position: absolute;
display: block;
right: 380px;
left: auto;
top: 0;
width: 80px;
height:80px;
border-radius: 62px;
text-align: center;
font-size: 28px;
font-size: 2.8rem;
line-height: 1; }
.sec .circle_new　img {width: 100%;}



@media screen and (max-width: 1060px) {
.sec .circle {
width: 80px;
height: 80px;
position: absolute;
right: 380px;
left: auto;
bottom: auto;
top: 0;
font-size: 19px;
font-size: 1.9rem; }
.sec .circle_left {
width: 80px;
height: 80px;
position: absolute;
right: 380px;
left: auto;
bottom: auto;
top: 0;
font-size: 19px;
font-size: 1.9rem; }
.sec .circle_new {
width: 80px;
height: 80px;
position: absolute;
right: 42%;
left: auto;
bottom: auto;
top: 0;
font-size: 19px;
font-size: 1.9rem;
}

}
@media screen and (max-width: 747px) {
.sec .circle {
width: 60px;
height: 60px;
top: 0;
left: auto;
right: 0;}
.sec .circle_left {
top: 0;
right: auto;
left: 0;}
.sec .circle_new {
width: 60px;
height: 60px;
top: 0;
right: auto;
left: 0;
}

.kyokobako .circle_new  {left: 42%;}


}







.hokkaido .circle {
position: absolute;
display: block;
right: 360px;
left: auto;
top: 0;
width: 80px;
height: 80px;
border-radius: 62px;
background: #3F9124;
text-align: center;
color: #fff;
font-size: 28px;
font-size: 2.8rem;
line-height: 1; }

.hokkaido .circle_left {
position: absolute;
display: block;
right: 360px;
left: auto;
top: 0;
width: 80px;
height: 80px;
border-radius: 62px;
background: #3F9124;
text-align: center;
color: #fff;
font-size: 28px;
font-size: 2.8rem;
line-height: 1; }


@media screen and (max-width: 1060px) {
.hokkaido .circle {
width: 80px;
height: 80px;
position: absolute;
right: 42%;
left: auto;
bottom: auto;
top: 0;
font-size: 19px;
font-size: 1.9rem; }
.hokkaido .circle_left {
width: 80px;
height: 80px;
position: absolute;
right: 42%;
left: auto;
bottom: auto;
top: 0;
font-size: 19px;
font-size: 1.9rem; }
}
@media screen and (max-width: 747px) {
.hokkaido .circle {
width: 60px;
height: 60px;
top: 0;
left: auto;
right: auto;}

.hokkaido .circle_left {
width: 60px;
height: 60px;
top: 0;
right: auto;
left: 0;}
.hokkaido .circle span,
.hokkaido .circle_left span,
.sec .circle span,
.sec .circle_new span{font-size: 3vw;}
}

.hokkaido .circle span,
.hokkaido .circle_left span,
.sec .circle span,
.sec .circle_new span{
font-size: 14px;
position: absolute;
display: block;
left: 0;
top: 50%;
width: 100%;
transform: translateY(-50%); }






.hokkaido h3,
.jyoon h3{
display: inline-block;
padding: 0 10px;
font-size: 32px;
font-size: 3.2rem;
background: url(../images/obi.png) no-repeat;
background-size: auto 95px;
letter-spacing: -0.1em;
margin: 10px 0 0 0 !important; }
@media screen and (max-width: 1060px) {
.hokkaido h3,
.jyoon h3{
position: relative;
display: block;
z-index: 2;
margin: 15px 0!important;
padding: 10px;
font-size: 26px;
font-size: 2.6rem;
line-height: 1;
box-sizing: border-box;
width: 48% !important;}
}
.hokkaido h3 span,
.jyoon h3 span {
font-size: 20px;
font-size: 2rem; }
@media screen and (max-width: 747px) {


.hokkaido h3,
.jyoon h3{width: 100% !important;}
.hokkaido h3 span,
.jyoon h3 span {
font-size: 16px;
font-size: 1.6rem; } }

nav{
  margin:0;
}
@media screen and (max-width: 1060px) {
  nav{
    margin: 0;
  }
}
@media screen and (max-width: 747px) {
  nav{
    margin: 10px 0 20px 0;
  }
}
nav ul{
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 747px) {
  nav ul{
    justify-content: space-between;
  }
}
nav ul li{
  width: 30%;
  margin: 0 10px;
}
@media screen and (max-width: 747px) {
  nav ul li{
    width: 30%;
    margin: 0;
  }
}
nav ul li a{
  position: relative;
  display: block;
  padding: 10px 0 20px;
  /*background: #B29400;*/
  background: #000;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: .4s ease;
}
@media screen and (max-width: 747px) {
  nav ul li a{
    padding: 5px 0 15px;
    font-size: 12px;
  }
}
nav ul li a:after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 0 0 -4px;
  transform: rotate(45deg);
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
nav ul li a:hover{
  opacity: .7;
}




.pc {display: block;}
.tab {display: block;}
.tabonly {display: none;}
.sph {display: none;}
@media screen and (max-width: 1060px) {
.pc {display: block;}
.tab {display: block;}
.tab2 {display: block;}
.tabonly {display: block;}
.sph {display: none;}
}
@media screen and (max-width: 747px) {
.pc {display: none;}
.tab {display: none;}
.tabonly {display: none;}
.sph {display: block;}
}
