@charset "UTF-8";
#top-page .main {
background: no-repeat url(//isogairyouhou.com/wp-content/themes/kamoshita/images/top_main.jpg) 50% 50%;
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
min-height: 800px; }
#top-page .main .inner {
background: #FFF;
box-sizing: border-box;
padding: 2.5%;
position: absolute;
top: 0;
left: 0;
width: 20%;
height: 100vh;
min-height: 800px;
display: flex;
align-items: center; }
#top-page .main .inner #h1 {
position: absolute;
bottom: 36px;
left: 50%;
transform: translate(-50%, 0%);
width: 80%; }
#top-page .main .inner #h2 {
margin-top: -120px;
padding: 0 15% 0 10%; }
#top-page .about {
background: #dee8e8;
background: linear-gradient(180deg, #FFF 0%, #FFF 50%, #dee8e8 50%, #dee8e8 100%);
padding: 4rem 5% 2rem; }
#top-page .about .inner {
display: flex;
align-items: flex-start;
position: relative; }
#top-page .about .inner .imageBox,
#top-page .about .inner .txtBox {
box-sizing: border-box; }
#top-page .about .inner .imageBox {
width: 60%; }
#top-page .about .inner .txtBox {
width: 40%;
padding: 4rem 4rem 0 2rem; }
#top-page .about .inner .txtBox h2 {
position: absolute;
top: 0;
right: 0;
color: #186577;
font-size: 28px;
white-space: nowrap;
text-orientation: upright; }
#top-page .about .inner .txtBox h3 {
font-size: 18px;
line-height: 1.6em;
margin-bottom: 2rem; }
#top-page .about2 {
background: #dee8e8;
padding: 4rem 5%; }
#top-page .about2 .inner {
display: flex;
align-items: center; }
#top-page .about2 .inner .txtBox,
#top-page .about2 .inner .linkBox {
box-sizing: border-box; }
#top-page .about2 .inner .txtBox {
width: 60%;
padding: 0 4rem 0 2rem;
position: relative; }
#top-page .about2 .inner .txtBox h2 {
color: #186577;
font-size: 28px;
line-height: 1.5em;
margin-bottom: 1rem; }
#top-page .about2 .inner .txtBox h3 {
font-size: 16px;
line-height: 1.8em;
margin-bottom: 1rem; }
#top-page .about2 .inner .linkBox {
padding: 0 4rem;
width: 40%; }
#top-page .cause {
padding: 4rem 5% 2rem; }
#top-page .cause .inner {
display: flex;
align-items: center;
position: relative; }
#top-page .cause .inner .imageBox,
#top-page .cause .inner .txtBox {
box-sizing: border-box; }
#top-page .cause .inner .imageBox {
width: 60%; }
#top-page .cause .inner .imageBox ul {
display: flex;
flex-wrap: wrap; }
#top-page .cause .inner .imageBox ul li {
width: 31.333%;
margin: 0 1% 2rem;
text-align: center; }
#top-page .cause .inner .imageBox ul li .txt {
font-size: 13px;
margin-top: 1rem;
padding: 0 0.75rem; }
#top-page .cause .inner .txtBox {
width: 40%;
padding: 0 4rem 0 2rem; }
#top-page .cause .inner .txtBox h2 {
position: absolute;
top: 0;
right: 0;
color: #186577;
font-size: 28px; }
#top-page .cause .inner .txtBox h3 {
font-size: 18px;
line-height: 1.6em;
margin-bottom: 2rem; }
#top-page .nishiogi {
background: #dee8e8;
padding: 4rem 5% 2rem; }
#top-page .nishiogi .inner {
display: flex;
align-items: center;
position: relative; }
#top-page .nishiogi .inner .itemBox,
#top-page .nishiogi .inner .txtBox {
box-sizing: border-box; }
#top-page .nishiogi .inner .imageBox {
width: 40%; }
#top-page .nishiogi .inner .txtBox {
width: 60%;
padding: 0 2rem 0 5.5rem; }
#top-page .nishiogi .inner .txtBox h2 {
position: absolute;
top: 0;
left: 0;
color: #186577;
font-size: 28px; }
#top-page .nishiogi .inner .txtBox h3 {
font-size: 18px;
line-height: 1.6em;
margin-bottom: 2rem; }
#top-page .shop {
padding: 4rem 5% 2rem; }
#top-page .shop .inner {
display: flex;
align-items: center;
position: relative; }
#top-page .shop .inner .itemBox,
#top-page .shop .inner .txtBox {
box-sizing: border-box; }
#top-page .shop .inner .itemBox {
width: 60%; }
#top-page .shop .inner .itemBox ul {
display: flex;
flex-wrap: wrap;
justify-content: center; }
#top-page .shop .inner .itemBox ul li {
width: 23%;
margin: 0 1% 2rem;
text-align: center; }
#top-page .shop .inner .itemBox ul li .item {
line-height: 1.4em;
margin-top: 1rem; }
#top-page .shop .inner .txtBox {
width: 40%;
padding: 0 4rem 0 2rem; }
#top-page .shop .inner .txtBox h2 {
position: absolute;
top: 0;
right: 0;
color: #186577 !important;
background-color:transparent !important;
font-size: 28px;
padding-right: 0;
}
#top-page .shop .inner .txtBox h3 {
font-size: 18px;
line-height: 1.6em;
margin-bottom: 2rem; }
#top-page .movie {
background: #dee8e8;
padding: 4rem 5%; }
#top-page .movie .inner {
display: flex;
align-items: center;
position: relative; }
#top-page .movie .inner .movieBox,
#top-page .movie .inner .txtBox {
box-sizing: border-box; }
#top-page .movie .inner .movieBox {
width: 60%; }
#top-page .movie .inner .movieBox iframe {
width: 100%;
aspect-ratio: 16/9;
vertical-align: bottom; }
#top-page .movie .inner .txtBox {
width: 40%;
padding: 0 2rem 0 4rem; }
#top-page .movie .inner .txtBox h2 {
position: absolute;
top: 0;
left: 0;
color: #186577 !important;
background-color:transparent !important;
font-size: 28px;
padding-left: 0;
}
#top-page .movie .inner .txtBox h3 {
font-size: 18px;
line-height: 1.6em;
margin-bottom: 2rem; }
#top-page .column {
padding: 4rem 8%; }
#top-page .column h2 {
color: #186577;
font-size: 28px;
margin-bottom: 3rem;
padding-left: 2rem; }
#top-page .column .inner {
display: flex;
align-items: flex-start; }
#top-page .column .inner .columnBox,
#top-page .column .inner .listBox {
box-sizing: border-box;
padding: 0 2rem;
width: 50%; }
#top-page .column .inner .columnBox ul {
border-top: 1px solid #8f8f8f; }
#top-page .column .inner .columnBox ul li {
border-bottom: 1px solid #8f8f8f; }
#top-page .column .inner .columnBox ul li a {
padding: 1rem 1rem; }
#top-page .column .inner .columnBox ul li a span {
color: #186577;
margin-right: 2rem; }
#top-page .column .inner .listBox ul li {
font-size: 16px;
margin-bottom: 1rem; }
#top-page .column .inner .listBox ul li:last-child {
margin-bottom: 0; }
#top-page .column .inner .listBox ul li a {
border: 1px solid #8f8f8f;
color: #186577;
padding: 1.25rem 2rem; }
#top-page .column .inner .listBox ul li a span {
color: #186577; }
#top-page .column .inner .listBox ul li a.arrow {
position: relative; }
#top-page .column .inner .listBox ul li a.arrow::before {
content: '';
width: 10px;
height: 10px;
border-top: solid 1px #8f8f8f;
border-right: solid 1px #8f8f8f;
position: absolute;
right: 1.5rem;
top: 40%; }
#top-page .column .inner .listBox ul li a.arrow.arrow-right::before {
transform: rotate(45deg); }
#top-page .column .inner .listBox ul li a:hover {
background: #186577;
border-color: #186577;
color: #FFF;
opacity: 1; }
#top-page .column .inner .listBox ul li a:hover.arrow::before {
border-color: #FFF; }
#top-page .access {
background: #dee8e8;
}
#top-page .access .inner {
display: flex;
align-items: center; }
#top-page .access .inner .mapBox,
#top-page .access .inner .txtBox {
box-sizing: border-box;
width: 50%; }
#top-page .access .inner .mapBox iframe {
width: 100%;
aspect-ratio: 4/3;
vertical-align: bottom; }
#top-page .access .inner .txtBox {
padding: 0 6rem; }
#top-page .access .inner .txtBox h2 {
color: #186577;
font-size: 28px;
margin-bottom: 3rem; }
#top-page .access .inner .txtBox h3 {
font-size: 18px;
margin-bottom: 1rem; }
#top-page .access .inner .txtBox .box {
margin-bottom: 2rem; }
#top-page .access .inner .txtBox .box:last-child {
margin-bottom: 0; }
.Maintitle{
padding: 4rem 5% 0rem;
text-align: center;
font-size: 27px;
color: #186577;
font-weight: bold;
}
 @media screen and (max-width: 1281px) { body {
font-size: 14px; }
#top-page .access .inner .mapBox {
padding-left: 5%; }
#top-page .access .inner .txtBox {
padding: 4rem 5%; }
.Sptitle{
display: block;
line-height: 1.7;} }
@media screen and (max-width: 1025px) { }
@media screen and (max-width: 821px) { #top-page .main .inner {
width: 28%; }
#top-page .about {
background: #dee8e8;
background: linear-gradient(180deg, #FFF 0%, #FFF 30.5%, #dee8e8 30.5%, #dee8e8 100%);
padding: 4rem 5% 0; }
#top-page .about .inner {
flex-wrap: wrap; }
#top-page .about .inner .imageBox,
#top-page .about .inner .txtBox {
width: 100%; }
#top-page .about .inner .imageBox {
order: 2;
padding: 0 5%; }
#top-page .about .inner .txtBox {
order: 1;
margin-bottom: 4rem;
padding: 2rem 7.5% 0 5%; }
#top-page .about .inner .txtBox h2 {
font-size: 32px; }
#top-page .about2 .inner {
flex-wrap: wrap; }
#top-page .about2 .inner .txtBox,
#top-page .about2 .inner .linkBox {
padding: 0 5%;
width: 100%; }
#top-page .about2 .inner .txtBox {
margin-bottom: 4rem; }
#top-page .about2 .inner .txtBox h2 {
margin-bottom: 2rem; }
#top-page .about2 .inner .linkBox .image {
display: block;
margin: 0 auto;
width: 50%; }
#top-page .cause {
padding: 4rem 5% 2rem; }
#top-page .cause .inner {
flex-wrap: wrap; }
#top-page .cause .inner .imageBox,
#top-page .cause .inner .txtBox {
width: 100%; }
#top-page .cause .inner .imageBox {
order: 2;
padding: 0 5% 0 5%; }
#top-page .cause .inner .imageBox ul li .txt {
font-size: 14px; }
#top-page .cause .inner .txtBox {
margin-bottom: 4rem;
order: 1;
padding: 0 7.5% 0 5%; }
#top-page .cause .inner .txtBox h2 {
font-size: 32px; }
#top-page .nishiogi {
padding: 4rem 5% 2rem; }
#top-page .nishiogi .inner {
flex-wrap: wrap; }
#top-page .nishiogi .inner .imageBox,
#top-page .nishiogi .inner .txtBox {
width: 100%; }
#top-page .nishiogi .inner .imageBox {
order: 2;
padding: 0 5% 0 5%; }
#top-page .nishiogi .inner .imageBox ul li .txt {
font-size: 14px; }
#top-page .nishiogi .inner .txtBox {
margin-bottom: 4rem;
order: 1;
padding: 0 7.5% 0 5%; }
#top-page .nishiogi .inner .txtBox h2 {
font-size: 32px; }
#top-page .shop {
padding: 4rem 5%; }
#top-page .shop .inner {
flex-wrap: wrap; }
#top-page .shop .inner .itemBox,
#top-page .shop .inner .txtBox {
width: 100%; }
#top-page .shop .inner .itemBox {
order: 2;
padding: 0 7.5%; }
#top-page .shop .inner .itemBox .btn {
margin-top: 1rem; }
#top-page .shop .inner .itemBox .btn a {
width: 85%; }
#top-page .shop .inner .txtBox {
order: 1;
margin-bottom: 4rem;
padding: 0 5% 0 7.5%; }
#top-page .shop .inner .txtBox h2 {
font-size: 32px; }
#top-page .movie {
padding: 4rem 5%; }
#top-page .movie .inner {
flex-wrap: wrap; }
#top-page .movie .inner .movieBox,
#top-page .movie .inner .txtBox {
width: 100%; }
#top-page .movie .inner .movieBox {
order: 2;
padding: 0 5%; }
#top-page .movie .inner .txtBox {
order: 1;
margin-bottom: 4rem;
padding: 0 7.5% 0 5%; }
#top-page .movie .inner .txtBox h2 {
font-size: 32px; }
#top-page .column {
padding: 4rem 10%; }
#top-page .column h2 {
padding-left: 0; }
#top-page .column .inner {
flex-wrap: wrap; }
#top-page .column .inner .columnBox,
#top-page .column .inner .listBox {
width: 100%;
padding: 0; }
#top-page .column .inner .columnBox {
margin-bottom: 4rem; }
#top-page .access .inner {
flex-wrap: wrap; }
#top-page .access .inner .mapBox,
#top-page .access .inner .txtBox {
width: 100%; }
#top-page .access .inner .mapBox {
order: 2;
padding-left: 0; }
#top-page .access .inner .mapBox iframe {
aspect-ratio: 2/1; }
#top-page .access .inner .txtBox {
order: 1;
padding: 4rem 10%; }
.tab-none, .pc {
display: none !important; }
}
@media screen and (min-width: 822px) {
.tab {display:none !important;}
}
@media screen and (max-width: 481px) { #top-page .main {
background-position: 60% 50%;
min-height: auto; }
#top-page .main .inner {
display: none; }
#top-page .main .desc {
background: rgba(255, 255, 255, 0.75);
box-sizing: border-box;
width: 100%;
padding: 1rem;
position: absolute;
bottom: 2rem;
left: 0; }
#top-page .main .desc h2 {
color: #186577;
font-size: 18px;
line-height: 1.6em;
text-align: center; }
#top-page .about {
background: #dee8e8;
background: linear-gradient(180deg, #FFF 0%, #FFF 80%, #dee8e8 80%, #dee8e8 100%);
padding: 2rem 5% 0; }
#top-page .about .inner {
flex-wrap: wrap; }
#top-page .about .inner .imageBox,
#top-page .about .inner .txtBox {
padding: 0; }
#top-page .about .inner .txtBox {
margin-bottom: 2rem; }
#top-page .about .inner .txtBox h2 {
display: block;
font-size: 24px;
margin-bottom: 1.5rem;
position: relative;
text-align: center; }
#top-page .about .inner .txtBox h2.vertical {
writing-mode: unset; }
#top-page .about .inner .txtBox h3 {
text-align: center; }
#top-page .about2 .inner .txtBox,
#top-page .about2 .inner .linkBox {
padding: 0;
width: 100%; }
#top-page .about2 .inner .txtBox {
margin-bottom: 2rem; }
#top-page .about2 .inner .txtBox h2 {
font-size: 24px;
margin-bottom: 1.5rem; }
#top-page .about2 .inner .linkBox .image {
display: block;
margin: 0 auto;
width: 50%; }
#top-page .cause {
padding: 2rem 5% 2rem; }
#top-page .cause .inner {
flex-wrap: wrap; }
#top-page .cause .inner .imageBox,
#top-page .cause .inner .txtBox {
width: 100%; }
#top-page .cause .inner .imageBox {
padding: 0; }
#top-page .cause .inner .imageBox ul li {
margin: 0 1% 1rem;
width: 48%; }
#top-page .cause .inner .txtBox {
margin-bottom: 2rem;
padding: 0; }
#top-page .cause .inner .txtBox h2 {
display: block;
font-size: 24px;
margin-bottom: 1.5rem;
position: relative;
text-align: center; }
#top-page .cause .inner .txtBox h2.vertical {
writing-mode: unset; }
#top-page .cause .inner .txtBox h3 {
text-align: center; }
#top-page .nishiogi {
padding: 2rem 5% 2rem; }
#top-page .nishiogi .inner {
flex-wrap: wrap; }
#top-page .nishiogi .inner .imageBox,
#top-page .nishiogi .inner .txtBox {
width: 100%; }
#top-page .nishiogi .inner .imageBox {
padding: 0; }
#top-page .nishiogi .inner .imageBox ul li {
margin: 0 1% 1rem;
width: 48%; }
#top-page .nishiogi .inner .txtBox {
margin-bottom: 2rem;
padding: 0; }
#top-page .nishiogi .inner .txtBox h2 {
display: block;
font-size: 24px;
margin-bottom: 1.5rem;
position: relative;
text-align: center; }
#top-page .nishiogi .inner .txtBox h2.vertical {
writing-mode: unset; }
#top-page .nishiogi .inner .txtBox h3 {
text-align: center; }
#top-page .shop {
padding: 2rem 5%; }
#top-page .shop .inner .itemBox,
#top-page .shop .inner .txtBox {
width: 100%; }
#top-page .shop .inner .itemBox {
padding: 0; }
#top-page .shop .inner .itemBox ul li {
margin-bottom: 1rem;
width: 48%; }
#top-page .shop .inner .itemBox .btn {
margin-top: 1rem; }
#top-page .shop .inner .itemBox .btn a {
width: 75%; }
#top-page .shop .inner .txtBox {
margin-bottom: 2rem;
padding: 0; }
#top-page .shop .inner .txtBox h2 {
display: block;
font-size: 24px;
margin-bottom: 1.5rem;
position: relative;
text-align: center; }
#top-page .shop .inner .txtBox h2.vertical {
writing-mode: unset; }
#top-page .shop .inner .txtBox h3 {
text-align: center; }
#top-page .movie {
padding: 2rem 5%; }
#top-page .movie .inner .movieBox {
padding: 0; }
#top-page .movie .inner .txtBox {
margin-bottom: 2rem;
padding: 0; }
#top-page .movie .inner .txtBox h2 {
display: block;
font-size: 24px;
margin-bottom: 1.5rem;
position: relative;
text-align: center; }
#top-page .movie .inner .txtBox h2.vertical {
writing-mode: unset; }
#top-page .movie .inner .txtBox h3 {
text-align: center; }
#top-page .column {
padding: 2rem 5%; }
#top-page .column h2 {
font-size: 24px;
margin-bottom: 1.5rem;
text-align: center; }
#top-page .column .inner .columnBox {
margin-bottom: 2rem; }
#top-page .column .inner .columnBox ul li a span {
display: block;
font-size: 14px;
font-weight: 700; }
#top-page .access .inner .mapBox iframe {
aspect-ratio: 1/1; }
#top-page .access .inner .txtBox {
padding: 2rem 5%; }
#top-page .access .inner .txtBox h2, #top-page .access .inner .txtBox h3 {
text-align: center; }
#top-page .access .inner .txtBox h2 {
margin-bottom: 2rem; }
#top-page .access .inner .txtBox h3 {
margin-bottom: 1.5rem; }
.pc {
display: none; }
.tab-none {
display: block; }
.smp {
display: block; }
.Maintitle{
background: rgba(255, 255, 255, 0.75);
box-sizing: border-box;
width: 100%;
padding: 1rem;
position: absolute;
bottom: 10rem;
left: 0;
color: #186577;
font-size: 19px;
line-height: 1.6em;
text-align: center;
font-weight: 600;
margin-bottom: 1.16rem;
}
.Sptitle{
display: block;
font-size: 23px;
}
.MainP{
background: rgba(255, 255, 255, 0.75);
box-sizing: border-box;
width: 100%;
padding: 1rem 1rem 1rem 1rem;
position: absolute;
bottom: 2rem;
left: 0;
color: #186577;
font-size: 18px;
line-height: 1.6em;
text-align: center;
font-weight: 600;
}
}
@media screen and (max-width: 321px) { }
@media screen and (max-height: 421px) { }