@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;500;600;700&display=swap");
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow-y: scroll; -webkit-text-size-adjust: 100%; font-family: 'Noto Sans JP', sans-serif;
}
*,
::before,
::after {
background-repeat: no-repeat; -webkit-box-sizing: inherit;
box-sizing: inherit;
}
::before,
::after {
text-decoration: inherit; vertical-align: inherit;
}
* {
padding: 0; margin: 0;
}  audio:not([controls]) {
display: none;
height: 0;
}
hr {
overflow: visible; } article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
summary {
display: list-item; }
small {
font-size: 80%; }
[hidden],
template {
display: none; }
abbr[title] {
border-bottom: 1px dotted; text-decoration: none; }
a {
background-color: transparent; -webkit-text-decoration-skip: objects; -webkit-transition: .3s;
transition: .3s;
}
a:active,
a:hover {
outline-width: 0; opacity: 0.6;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace; }
b,
strong {
font-weight: bolder; }
dfn {
font-style: italic; } mark {
background-color: #ff0;
color: #000;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
} input {
border-radius: 0;
} button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
cursor: pointer;
} [disabled] {
cursor: default;
}
[type="number"] {
width: auto; }
[type="search"] {
-webkit-appearance: textfield; }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
textarea {
overflow: auto; resize: vertical; }
button,
input,
optgroup,
select,
textarea {
font: inherit; }
optgroup {
font-weight: bold; }
button {
overflow: visible; } button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: 0;
padding: 0;
} button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
outline: 1px dotted ButtonText;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button; }
button,
select {
text-transform: none; } button,
input,
select,
textarea {
background-color: transparent;
border-style: none;
color: inherit;
} select {
-moz-appearance: none; -webkit-appearance: none; }
select::-ms-expand {
display: none; }
select::-ms-value {
color: currentColor; }
legend {
border: 0; color: inherit; display: table; max-width: 100%; white-space: normal; }
::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; }
[type="search"] {
-webkit-appearance: textfield; outline-offset: -2px; } img {
border-style: none; } progress {
vertical-align: baseline;
}
svg:not(:root) {
overflow: hidden; }
audio,
canvas,
progress,
video {
display: inline-block; }  @media screen {
[hidden~="screen"] {
display: inherit;
}
[hidden~="screen"]:not(:active):not(:focus):not(:target) {
position: absolute !important;
clip: rect(0 0 0 0) !important;
}
} [aria-busy="true"] {
cursor: progress;
} [aria-controls] {
cursor: pointer;
} [aria-disabled] {
cursor: default;
}  ::-moz-selection {
background-color: #b3d4fc; color: #000;
text-shadow: none;
}
::selection {
background-color: #b3d4fc; color: #000;
text-shadow: none;
} body {
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
font-family: 'Noto Sans JP', sans-serif;
color: #051731;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.pc {
display: block;
}
.sp {
display: none;
}
a {
text-decoration: none;
cursor: pointer;
-webkit-transition: .6s;
transition: .6s;
}
h2 {
font-family: 'Crimson Text', serif;
font-size: 60px;
font-weight: 400;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
padding-top: 40px;
margin-bottom: 80px;
margin-left: 60px;
}
h2:before {
content: "";
width: 200px;
height: 1px;
position: absolute;
top: 0;
left: 0;
background: #133958;
}
h2 span {
font-family: 'Noto Serif JP', serif;
font-size: 16px;
margin-left: 40px;
}
nav {
position: relative;
margin-left: 40px;
}
nav .nav_btn {
width: 40px;
height: 40px;
background: #0f2446;
position: relative;
border-radius: 50%;
}
nav .nav_btn span {
position: absolute;
top: 13px;
left: 0;
right: 0;
margin: auto;
width: 20px;
height: 1px;
background: #fff;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transition: .6s;
transition: .6s;
}
nav .nav_btn span.middle {
top: 20px;
}
nav .nav_btn span.bottom {
top: 27px;
}
nav ul {
background: #fff;
list-style: none;
text-align: right;
padding: 0 20px;
position: absolute;
top: 50px;
right: 0;
min-width: 200px;
height: 0;
-webkit-transition: .6s;
transition: .6s;
overflow: hidden;
}
nav ul li a {
font-size: 20px;
color: #333;
padding: 0 0 12px;
display: block;
word-break: keep-all;
}
nav.on .nav_btn span.top {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 20px;
}
nav.on .nav_btn span.middle {
opacity: 0;
}
nav.on .nav_btn span.bottom {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 20px;
}
nav.on ul {
padding: 20px;
height: 400px;
}
a:hover, a:active {
opacity: .6;
}
img, picture {
width: auto;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
div.areainc div img.img1,div.areainc div img.img2{
width: 416px;
height: auto;
max-width: 100%;
}
.wraper {
overflow: hidden;
position: relative;
}
section .inc {
max-width: 1200px;
margin: 0 auto;
padding: 100px 0;
}
.webp #kv {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/kv_bg.webp);
background-size: cover;
background-position: center top;
background-color: #192d3d;
}
.webp #sec1 .area {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/sec1_bg.webp);
background-size: cover;
background-position: center center;
}
.webp #sec3 {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/sec3_bg.webp);
background-size: cover;
background-position: center center;
}
.webp #sec5 .area2 .txt {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/sec5_bg.webp);
background-size: cover;
background-position: center center;
}
.webp #sec1 {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/bgmat.webp);
background-size: contain;
background-position: right top;
}
.webp #sec2 {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/bgmat.webp);
background-size: contain;
background-position: right top;
}
.webp #sec4 {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/bgmat.webp);
background-size: contain;
background-position: right top;
}
.webp #sec5 {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/bgmat.webp);
background-size: contain;
background-position: right top;
}
.no-webp #kv {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/kv_bg.png);
background-size: contain;
background-position: center center;
}
.no-webp #sec1 .area {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/sec1_bg.png);
background-size: cover;
background-position: center center;
}
.no-webp #sec3 {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/sec3_bg.png);
background-size: cover;
background-position: center center;
}
.no-webp #sec5 .area2 .txt {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/sec5_bg.png);
background-size: cover;
background-position: center center;
}
.no-webp #sec1 {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/bgmat.png);
background-size: contain;
background-position: right top;
}
.no-webp #sec2 {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/bgmat.png);
background-size: contain;
background-position: right top;
}
.no-webp #sec4 {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/bgmat.png);
background-size: contain;
background-position: right top;
}
.no-webp #sec5 {
background-image: url(//mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/bgmat.png);
background-size: contain;
background-position: right top;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
-webkit-transition: .6s;
transition: .6s;
}
header.on {
background: rgba(255, 255, 255, 0.7);
}
header .inc {
padding: 20px 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
header .inc .right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
header .inc .right .btn {
position: relative;
width: 260px;
}
header .inc .right .btn a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background: #133958;
font-size: 20px;
font-family: 'Crimson Text', serif;
color: #fff;
font-weight: 400;
padding: 14px 18px;
}
#kv .inc {
margin: 0 auto;
padding: 0 50px;
position: relative;
}
#kv .inc div {
padding: 199px 50px;
color: #fff;
}
#kv .inc div span {
display: block;
}
#kv .inc div span.kv1 {
font-family: 'Noto Serif JP', serif;
font-weight: 500;
font-size: 20px;
margin-bottom: 6px;
}
#kv .inc h1 span.kv2 {
font-family: 'Noto Serif JP', serif;
font-weight: 500;
font-size: 49px;
line-height: 1.3;
margin-bottom: 40px;
}
#kv .inc div span.kv2 {
font-family: 'Noto Serif JP', serif;
font-weight: 500;
font-size: 49px;
line-height: 1.3;
margin-bottom: 40px;
}
h1.kv2 {
font-family: 'Noto Serif JP', serif;
font-weight: 500;
font-size: 49px;
line-height: 1.3;
margin-bottom: 40px;
}
#kv .inc div span.kv3 {
font-weight: 500;
font-size: 17px;
line-height: 2;
}
#kv .inc .arrow {
position: absolute;
left: 50px;
bottom: -160px;
}
#sec0 {
background: #f8fafb;
}
#sec0 .inc .area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
padding: 0;
}
#sec0 .inc .area .youtube {
position: relative;
width: 48%;
padding-top: 27.25%;
}
#sec0 .inc .area .youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
#sec0 .inc .area .youtube p {
position: absolute;
bottom: -2rem;
left: 0rem;
font-size: min(16px, 3.5vw);
font-family: 'Noto Serif JP', serif;
color: #01091E;
line-height: 1;
margin: 0;
}
@media screen and (max-width: 768px) {
#sec0 .inc .area {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 2vw;
}
#sec0 .inc .area .youtube {
width: 100%;
padding-top: 56.25%;
margin-bottom: 7vw;
}
#sec0 .inc .area .youtube p {
bottom: -1.5rem;
left: 0;
}
}
#sec1 .inc {
padding-bottom: 0;
}
#sec1 .inc p {
margin-left: 60px;
margin-bottom: 40px;
font-size: 30px;
font-family: 'Noto Serif JP', serif;
line-height: 2;
}
#sec1 .inc .area {
margin: 0 calc(50% - 50vw);
width: 100vw;
}
#sec1 .inc .area .areainc {
max-width: 1080px;
margin: 0 auto;
padding: 80px 40px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#sec1 .inc .area .areainc .box {
color: #fff;
width: 46%;
overflow: hidden;
}
#sec1 .inc .area .areainc .box h3 {
font-size: 30px;
font-family: 'Noto Serif JP', serif;
position: relative;
display: inline-block;
}
#sec1 .inc .area .areainc .box h3:before {
content: "";
width: 5000px;
height: 2px;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 120%;
margin: auto;
}
#sec1 .inc .area .areainc .box p {
font-size: 14px;
margin: 30px 0 40px;
}
#sec1 .inc .area .areainc .box img {
display: block;
margin-bottom: 50px;
}
#sec1 .inc .area .areainc .box img.sp {
display: none;
}
#sec1 .inc .area .areainc .box img.img1, #sec1 .inc .area .areainc .box img.img2 {
margin-left: 30px;
}
#sec1 .inc .area .areainc .box.box1 {
width: 100%;
margin: 0;
}
#sec1 .inc .area .areainc .box.box1 h3:before {
width: 279px;
}
#sec1 .inc .area .areainc .img {
position: absolute;
top: 90px;
right: 0;
}
#sec2 .inc {
position: relative;
}
#sec2 .inc .area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1000px;
margin: 0 auto;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: end;
}
#sec2 .inc .area .box {
width: 44%;
margin: 3%;
text-align: center;
}
#sec2 .inc .area .box i {
font-size: 102px;
color: #133958;
font-family: 'Crimson Text', serif;
line-height: 1;
}
#sec2 .inc .area .box h3 {
font-family: 'Noto Serif JP', serif;
font-size: 30px;
padding-bottom: 24px;
margin-bottom: 30px;
border-bottom: 1px solid #051731;
}
#sec2 .inc .area .box h3 span {
font-size: 20px;
}
#sec2 .inc .area .box p {
text-align: left;
font-size: 14px;
line-height: 2;
}
#sec2 .inc .area .box p span {
font-size: 12px;
}
#sec2 .inc .area .box.box1 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin-top: -34%;
}
#sec2 .inc .area .box.box2 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
#sec2 .inc .area .box.box3 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
margin-top: -34%;
}
#sec2 .inc .area .box.box4 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
#sec2 .inc .area .box.box5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
margin-top: -34%;
}
#sec2 .inc .area2 h3 {
font-size: 30px;
font-family: 'Noto Serif JP', serif;
position: relative;
display: inline-block;
color: #133958;
margin-left: 60px;
}
#sec2 .inc .area2 h3:before {
content: "";
width: 242px;
height: 1px;
background: #133958;
position: absolute;
top: 0;
bottom: 0;
left: 120%;
margin: auto;
}
#sec2 .inc .area2 .box {
margin: 40px 0 0 100px;
}
#sec2 .inc .area2 .box picture.sec2_list.pc {
width: 920px;
}
#sec2 .inc .area2 .box p {
font-size: 12px;
margin-top: 18px;
}
#sec2 .inc .area2 .box2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 80px 0 0 100px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#sec2 .inc .area2 .box2 .tyu {
font-size: 17px;
font-weight: bold;
width: 100%;
margin-bottom: 40px;
font-family: 'Noto Serif JP', serif;
}
#sec2 .inc .area2 .box2 .block {
width: 48%;
text-align: center;
}
#sec2 .inc .area2 .box2 .block h3 {
font-size: 24px;
margin: 0 0 20px;
background: #eff2f4;
display: block;
padding: 8px 20px;
text-align: left;
font-family: 'Noto Serif JP', serif;
}
#sec2 .inc .area2 .box2 .block h3:before {
display: none;
}
#sec2 .inc .area2 .box2 .block .sec2_block2 {
padding-top: 130px;
display: block;
}
#sec2 .inc .area2 .box2 .block ul {
margin-top: 20px;
text-align: left;
}
#sec2 .inc .area2 .box2 .block ul li {
margin-bottom: 14px;
font-size: 15px;
font-family: 'Noto Serif JP', serif;
}
div.insen{
margin-top:20px;
text-align:left;
font-family: 'Noto Serif JP', serif;
}
@media screen and (max-width: 920px){
div.insen {
font-size: 3.8vw;
margin-bottom: 3vw;
}
}
span.parsen {
font-size: 40px;
}
div.box2 div.block img.b-down1{
width: 326px;
height: auto;
max-width: 100%;
}
div.box2 div.block img.b-down2{
width: 480px;
height: auto;
max-width: 100%;
}
#sec3 .inc {
color: #fff;
position: relative;
}
#sec3 .inc h2:before {
background: #fff;
}
#sec3 .inc .area {
margin-left: 60px;
width: 48%;
}
#sec3 .inc .area h3 {
font-size: 30px;
font-family: 'Noto Serif JP', serif;
line-height: 1.8;
margin-bottom: 60px;
}
#sec3 .inc .area p {
font-size: 14px;
line-height: 1.8;
}
#sec3 .inc picture {
position: absolute;
bottom: 80px;
right: 0;
}
#sec4 .inc .area {
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
}
#sec4 .inc .area .box h3 {
font-size: 26px;
font-family: 'Noto Serif JP', serif;
font-weight: 500;
margin-bottom: 40px;
}
#sec4 .inc .area .box .block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 60px;
}
#sec4 .inc .area .box .block p {
width: 46%;
margin-top: 16px;
margin-right: 4%;
font-size: 14px;
font-weight: 400;
line-height: 1.8;
}
#sec4 .inc .area .box .block p span {
font-size: 16px;
font-weight: 500;
}
#sec4 .inc .area .box .block picture {
width: 48%;
margin-left: 2%;
}
#sec4 .inc .area .btn {
width: 260px;
}
#sec4 .inc .area .btn a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #fff;
background: #0f2446;
padding: 15px 0;
}
#sec4 .inc .area .btn a i {
margin-left: 18px;
}
#sec5 .inc h3 {
font-size: 30px;
margin-left: 60px;
font-family: 'Noto Serif JP', serif;
font-weight: 500;
margin-bottom: 40px;
line-height: 1.8;
position: relative;
}
#sec5 .inc .area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 60px 80px;
}
#sec5 .inc .area p {
width: 640px;
line-height: 2;
font-size: 14px;
}
#sec5 .inc .area p span {
font-size: 12px;
}
#sec5 .inc .area2 h3 span {
display: block;
font-size: 16px;
position: relative;
margin-bottom: 18px;
}
#sec5 .inc .area2 h3 span:before {
content: "";
width: 127px;
height: 1px;
background: #133958;
position: absolute;
top: 0;
bottom: 0;
left: 130px;
margin: auto;
}
#sec5 .inc .area2 .block {
position: relative;
}
#sec5 .inc .area2 .block picture {
position: absolute;
top: 60px;
z-index: 2;
}
#sec5 .inc .area2 .block .txt {
width: 860px;
margin: 0 0 0 auto;
padding: 60px 60px 80px 120px;
color: #fff;
}
#sec5 .inc .area2 .block .txt p {
font-size: 14px;
line-height: 1.8;
margin-bottom: 32px;
}
#sec5 .inc .area2 .block .txt p.name {
text-align: right;
}
#sec5 .inc .area2 .block .txt p.name span {
font-size: 20px;
font-family: 'Noto Serif JP', serif;
margin-left: 8px;
letter-spacing: 4px;
}
#sec6 .inc .area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
}
#sec6 .inc .area .youtube {
position: relative;
width: 48%;
padding-top: 27.25%;
}
#sec6 .inc .area .youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
#sec6-2 .inc .area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
}
#sec6-2 .inc .area .youtube {
position: relative;
width: 48%;
padding-top: 27.25%;
}
#sec6-2 .inc .area .youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
} #sec6-2 .inc .area.-three {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 0;
}
#sec6-2 .inc .area:not(:last-child) {
margin-bottom: 3%;
}
#sec6-2 .inc .area.-three .youtube {
position: relative;
width: 32%;
padding-top: 20.25%;
}
#sec6-2 .inc .area.-three .youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 768px) {
#sec6-2 .inc .area.-three .youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
}
#sec7 .inc {
position: relative;
}
#sec7 .inc .area {
max-width: 787px;
margin: 0 0 0 auto;
}
#sec7 .inc .area .box {
overflow: hidden;
height: 100px;
margin-bottom: 20px;
-webkit-transition: .6s;
transition: .6s;
}
#sec7 .inc .area .box h3 {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 8px;
margin-bottom: 30px;
border-bottom: 1px solid #051731;
}
#sec7 .inc .area .box h3 span {
font-family: 'Crimson Text', serif;
font-style: italic;
font-size: 50px;
margin-right: 20px;
}
#sec7 .inc .area .box h3 p {
font-family: 'Noto Serif JP', serif;
font-weight: 500;
font-size: 26px;
}
#sec7 .inc .area .box h3 i {
position: absolute;
bottom: 8px;
right: 6px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: .6s;
transition: .6s;
}
#sec7 .inc .area .box .block p {
font-size: 14px;
line-height: 1.8;
margin-left: 80px;
}
#sec7 .inc .area .box.on {
height: 200px;
}
#sec7 .inc .area .box.on h3 i {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
#sec8 {
overflow: hidden;
}
#sec8 .inc {
position: relative;
}
#sec8 .inc .area {
max-width: 787px;
margin: 0 0 0 auto;
background: #0f2446;
color: #fff;
position: relative;
}
#sec8 .inc .area:before {
content: "";
background: #0f2446;
position: absolute;
width: 100vw;
height: 100%;
top: 0;
left: 100%;
}
#sec8 .inc .area dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
#sec8 .inc .area dl dt {
font-family: 'Noto Serif JP', serif;
font-size: 18px;
padding: 32px;
width: 176px;
}
#sec8 .inc .area dl dd {
font-size: 14px;
padding: 32px 0 0;
line-height: 1.8;
}
#sec8 .inc .area dl dd p {
margin-bottom: 32px;
}
#sec8 .inc .area dl dd p.underline {
position: relative;
padding-bottom: 32px;
}
#sec8 .inc .area dl dd p.underline:before {
content: "";
width: 100vw;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
}
#sec8 .inc .area dl dd p a {
color: #fff;
text-decoration: underline;
}
#sec8 .inc .area dl:before {
content: "";
width: 100vw;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
}
#contact {
background: #eff2f4;
}
#contact .inc p {
margin-left: 60px;
font-family: 'Noto Serif JP', serif;
font-size: 30px;
}
#contact .inc form {
max-width: 600px;
margin: 0 auto;
padding: 80px 20px;
}
#contact .inc form p {
font-size: 12px;
margin: 0 0 20px;
line-height: 1.6;
}
#contact .inc form .submitbtn {
width: 100%;
}
#contact .inc form .submitbtn span {
position: relative;
}
#contact .inc form .submitbtn span input {
display: block;
width: 100%;
text-align: center;
color: #fff;
background: #0f2446;
padding: 15px 0;
font-size: 26px;
-webkit-transition: .6s;
transition: .6s;
}
#contact .inc form .submitbtn span input:hover, #contact .inc form .submitbtn span input:active {
opacity: 0.6;
}
#contact .inc form .submitbtn span i {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto 180px auto auto;
width: 32px;
height: 32px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#contact .inc form dl dt {
font-family: 'Noto Serif JP', serif;
font-size: 16px;
}
#contact .inc form dl dt span {
margin-left: 8px;
}
#contact .inc form dl dd {
font-size: 16px;
width: 100%;
margin: 12px 0 24px;
}
#contact .inc form dl dd input, #contact .inc form dl dd select, #contact .inc form dl dd textarea {
width: 100%;
background: #fff;
border: 1px solid #d2d2d2;
padding: 4px 8px;
}
#contact .inc form dl dd.radio {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#contact .inc form dl dd.radio label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 48%;
background: #fff;
border: 1px solid #d2d2d2;
padding: 4px 8px;
}
#contact .inc form dl dd.radio label input {
width: 20px;
height: 20px;
padding: 0;
margin: 0 8px 0 0;
}
#contact .inc form {
max-width: 600px;
margin: 0 auto;
padding: 80px 20px;
}
#contact .inc form p {
font-size: 12px;
margin: 0 0 20px;
line-height: 1.6;
}
#contact .inc form .submitbtn {
width: 100%;
text-align: center;
position: relative;
}
#contact .inc form .submitbtn button {
display: block;
width: 100%;
text-align: center;
color: #fff;
background: #0f2446;
padding: 15px 0;
font-size: 26px;
-webkit-transition: .6s;
transition: .6s;
}
#contact .inc form .submitbtn button:hover, #contact .inc form .submitbtn button:active {
opacity: 0.6;
}
#contact .inc form .submitbtn i {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto 180px auto auto;
width: 32px;
height: 32px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#contact .inc form .p-formDetails__item p.p-formDetails__itemTitle {
font-family: 'Noto Serif JP', serif;
font-size: 16px;
}
#contact .inc form .p-formDetails__item .p-formDetails__itemContent {
font-size: 16px;
width: 100%;
margin: 4px 0 24px;
}
#contact .inc form .p-formDetails__item .p-formDetails__itemContent input, #contact .inc form .p-formDetails__item .p-formDetails__itemContent select, #contact .inc form .p-formDetails__item .p-formDetails__itemContent textarea {
width: 100%;
background: #fff;
border: 1px solid #d2d2d2;
padding: 4px 8px;
}
#contact .inc form .p-formDetails__item .p-formDetails__itemContent .p-formDetails__itemRadio {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#contact .inc form .p-formDetails__item .p-formDetails__itemContent .p-formDetails__itemRadio .p-formDetails__itemRadioInner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 48%;
background: #fff;
border: 1px solid #d2d2d2;
padding: 4px 8px;
}
#contact .inc form .p-formDetails__item .p-formDetails__itemContent .p-formDetails__itemRadio .p-formDetails__itemRadioInner input {
width: 20px;
height: 20px;
padding: 0;
margin: 0 8px 0 0;
}
footer {
background: #0f2446;
text-align: center;
padding: 12px;
}
@media screen and (max-width: 1350px) {
.webp #kv {
background-size: cover;
}
}
@media screen and (max-width: 1200px) {
#sec7 .inc .area {
margin-right: 20px;
}
}
@media screen and (max-width: 1100px) {
#sec1 .inc .area .areainc .img {
width: 45vw;
}
#sec2 .inc .img {
width: 51vw;
}
#sec2 .inc .area2 .box {
margin: 40px 0 0 40px;
}
#sec3 .inc picture {
width: 45vw;
}
#sec5 .inc .area2 .block picture {
width: 32vw;
}
#sec5 .inc .area2 .block .txt {
width: 75vw;
}
}
@media screen and (max-width: 920px) {
.pc {
display: none;
}
.sp {
display: block;
}
h2 {
font-size: 8vw;
padding: 4vw 0;
text-align: center;
display: block;
margin-bottom: 5vw;
margin-left: 0;
}
h2 span {
display: block;
font-size: 4.2vw;
margin: 0;
}
h2:before {
right: 0;
margin: auto;
width: 26vw;
height: 2px;
}
header {
background: #fff;
}
header .inc {
padding: 3vw 4vw;
}
header .inc .logo {
width: 24vw;
}
header .inc .right .btn {
width: 42vw;
}
header .inc .right .btn a {
font-size: 3.4vw;
padding: 2vw;
}
main {
margin-top: 14vw;
}
section .inc {
padding: 12vw 4vw;
}
#kv .inc {
padding: 0;
}
#kv .inc h1 {
text-align: center; font-size: 5.8vw;
line-height: 10vw;
margin-bottom: 4vw;
}
#kv .inc div {
text-align: center;
padding: 50vw 0 12vw;
　}
#kv .inc h1 span.kv1 {
font-size: 4vw;
margin-bottom: 4vw;
}
#kv .inc h1 span.kv2 {
font-size: 5.8vw;
line-height: 10vw;
margin-bottom: 4vw;
}
#kv .inc div span.kv3 {
font-size: 4vw;
line-height: 7vw;
font-weight: 300;
}
#kv .inc .arrow {
display: none;
}
.webp #sec1 .area {
background-size: contain;
background-position: top center;
background-color: #0f2446;
position: relative;
}
.webp #sec1 .area:before {
content: "";
width: 100%;
height: 16vw;
position: absolute;
left: 0;
top: 57vw;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(15, 36, 70, 0)), color-stop(38%, #0f2446), to(#0f2446));
background: linear-gradient(to bottom, rgba(15, 36, 70, 0) 0%, #0f2446 38%, #0f2446 100%);
}
#sec1 .inc p {
margin: 0 0 6vw;
font-size: 4.8vw;
}
#sec1 .inc .area .areainc {
padding: 8vw 4vw;
display: block;
}
#sec1 .inc .area .areainc .box {
width: 100%;
margin: 0 0 0vw;
}
#sec1 .inc .area .areainc .box h3 {
font-size: 4.8vw;
font-weight: 500;
}
#sec1 .inc .area .areainc .box.box1 h3:before {
width: 5000px;
}
#sec1 .inc .area .areainc .box p {
font-size: 3.4vw;
margin: 3vw 0 6vw;
}
#sec1 .inc .area .areainc .box img {
margin-bottom: 5vw;
}
#sec1 .inc .area .areainc .box img.img1, #sec1 .inc .area .areainc .box img.img2 {
margin: 0 0 5vw;
border-left: 1px solid #fff;
padding-left: 4vw;
}
#sec1 .inc .area .areainc .box img.pc {
display: none;
}
#sec1 .inc .area .areainc .box img.sp {
display: block;
}
#sec1 .inc .area .areainc .img {
position: relative;
width: 100%;
top: 0;
margin: 5vw 0 0;
}
#sec2 .inc .img {
width: 100%;
margin-left: -4vw;
}
#sec2 .inc .area {
display: block;
}
#sec2 .inc .area .box {
width: 100%;
margin: 0 0 5vw;
}
#sec2 .inc .area .box.box1 {
margin-top: 8vw;
}
#sec2 .inc .area .box.box3 {
margin-top: 0;
}
#sec2 .inc .area .box.box5 {
margin-top: 0;
}
#sec2 .inc .area .box i {
font-size: 13vw;
}
#sec2 .inc .area .box h3 {
font-size: 4.8vw;
padding-bottom: 4vw;
margin: 0 auto 4vw;
width: 82vw;
}
#sec2 .inc .area .box p {
font-size: 3.4vw;
line-height: 6vw;
margin-top: 5vw;
}
#sec2 .inc .area .box p span {
font-size: 2.8vw;
}
#sec2 .inc .area .box img {
height: 16vw;
}
#sec2 .inc .area2 h3 {
margin: 8vw 0 5vw;
font-size: 4.8vw;
}
#sec2 .inc .area2 h3:before {
width: 32vw;
}
#sec2 .inc .area2 .box {
margin: 0 calc(50% - 50vw);
width: 100vw;
padding: 0 0 3vw 4vw;
}
#sec2 .inc .area2 .box .sec2_list.sp {
overflow-x: scroll;
}
#sec2 .inc .area2 .box .sec2_list.sp img {
max-width: unset;
width: 129vw;
}
#sec2 .inc .area2 .box p {
font-size: 2.8vw;
margin-top: 6vw;
}
#sec2 .inc .area2 .box2 {
margin: 8vw 0 0;
}
#sec2 .inc .area2 .box2 .tyu {
font-size: 4.2vw;
margin-bottom: 4vw;
}
#sec2 .inc .area2 .box2 .block {
width: 100%;
}
#sec2 .inc .area2 .box2 .block h3 {
font-size: 4.2vw;
padding: 1vw 3vw;
}
#sec2 .inc .area2 .box2 .block ul {
margin: 5vw 0 8vw 6vw;
}
#sec2 .inc .area2 .box2 .block ul li {
font-size: 3.8vw;
margin-bottom: 3vw;
}
#sec2 .inc .area2 .box2 .block .sec2_block2 {
padding: 0;
}
#sec3 .inc .area {
margin: 0 0 5vw;
width: 100%;
}
#sec3 .inc .area h3 {
font-size: 4.8vw;
margin-bottom: 5vw;
}
#sec3 .inc .area p {
font-size: 3.4vw;
line-height: 6vw;
}
#sec3 .inc picture {
width: 100%;
position: relative;
bottom: auto;
right: auto;
margin: 0 0 0 -4vw;
}
#sec4 .inc .area {
padding: 0;
}
#sec4 .inc .area .box h3 {
font-size: 4.8vw;
margin-bottom: 5vw;
}
#sec4 .inc .area .box .block {
display: block;
margin-bottom: 5vw;
}
#sec4 .inc .area .box .block p {
width: 100%;
margin: 0 0 4vw;
font-size: 3.4vw;
line-height: 6vw;
}
#sec4 .inc .area .box .block p span {
font-size: 4vw;
}
#sec4 .inc .area .box .block picture {
width: 100%;
margin: 0;
}
#sec4 .inc .area .btn {
width: 56vw;
margin: 7vw auto;
}
#sec4 .inc .area .btn a {
padding: 3vw 0;
}
#sec4 .inc .area .btn a p {
font-size: 3.2vw;
}
#sec4 .inc .area .btn a i {
margin-left: 3vw;
}
#sec5 .inc h3 {
margin: 0 0 5vw;
font-size: 4.8vw;
}
#sec5 .inc .area {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 0 6vw;
}
#sec5 .inc .area p {
width: 100%;
font-size: 3.4vw;
line-height: 6vw;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
#sec5 .inc .area p span {
font-size: 2.8vw;
}
#sec5 .inc .area .sec5_img1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
width: 100%;
text-align: center;
margin: 0 0 5vw;
}
#sec5 .inc .area2 h3 span {
font-size: 4.2vw;
margin-bottom: 4vw;
}
#sec5 .inc .area2 h3 span:before {
left: 34vw;
width: 30vw;
}
#sec5 .inc .area2 .block picture {
position: relative;
top: auto;
margin: 5vw auto 0;
text-align: center;
width: 60vw;
display: block;
}
#sec5 .inc .area2 .block .txt {
padding: 55vw 4vw 5vw;
margin: -48vw calc(50% - 50vw) 0;
width: 100vw;
background-size: contain;
background-position: bottom;
background-color: #0f2446;
position: relative;
}
#sec5 .inc .area2 .block .txt:before {
content: "";
width: 100%;
height: 20vw;
position: absolute;
bottom: 79vw;
left: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(15, 36, 70, 0)), color-stop(38%, #0f2446), to(#0f2446));
background: linear-gradient(to top, rgba(15, 36, 70, 0) 0%, #0f2446 38%, #0f2446 100%);
z-index: 0;
}
#sec5 .inc .area2 .block .txt p {
font-size: 3.4vw;
line-height: 6vw;
margin-bottom: 6vw;
position: relative;
}
#sec5 .inc .area2 .block .txt p.name span {
font-size: 5.4vw;
margin-left: 2vw;
letter-spacing: 1vw;
}
#sec6 .inc .area {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 2vw;
}
#sec6 .inc .area .youtube {
width: 100%;
padding-top: 56.25%;
margin-bottom: 5vw;
}
#sec6-2 .inc .area {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 2vw;
}
#sec6-2 .inc .area .youtube {
width: 100%;
padding-top: 56.25%;
margin-bottom: 5vw;
}
#sec7 .inc .area {
margin: 10vw 0;
max-width: unset;
}
#sec7 .inc .area .box {
margin-bottom: 6vw;
height: 17vw;
}
#sec7 .inc .area .box.on {
height: 50vw;
}
#sec7 .inc .area .box h3 {
padding-bottom: 4vw;
margin-bottom: 4vw;
}
#sec7 .inc .area .box h3 span {
font-size: 6.6vw;
margin-right: 3vw;
}
#sec7 .inc .area .box h3 p {
font-size: 4vw;
}
#sec7 .inc .area .box h3 i {
bottom: 5vw;
right: 2vw;
}
#sec7 .inc .area .box.on h3 i img {
width: auto;
}
#sec7 .inc .area .box .block p {
font-size: 3.4vw;
line-height: 6vw;
margin-left: 0;
}
#sec8 {
background: #0f2446;
color: #fff;
}
#sec8 .inc h2:before {
background: #fff;
}
#sec8 .inc .area {
max-width: unset;
margin: 0;
}
#sec8 .inc .area:before {
display: none;
}
#sec8 .inc .area dl {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
#sec8 .inc .area dl:before {
display: none;
}
#sec8 .inc .area dl dt {
font-size: 4.8vw;
width: 23vw;
padding: 0;
}
#sec8 .inc .area dl dd {
font-size: 3.4vw;
width: 70vw;
border-left: 2px solid #fff;
padding: 1vw 2vw 4vw;
}
#contact .inc p {
margin: 0 auto;
font-size: 4.8vw;
text-align: center;
line-height: 8vw;
}
#contact .inc form {
max-width: 100%;
padding: 8vw 0vw;
}
#contact .inc form dl dt {
font-size: 3.6vw;
}
#contact .inc form dl dd {
font-size: 3.6vw;
margin: 2vw 0 5vw;
}
#contact .inc form dl dd input, #contact .inc form dl dd select, #contact .inc form dl dd textarea {
padding: 1vw 2vw;
}
#contact .inc form dl dd.radio label {
padding: 1vw 2vw;
}
#contact .inc form dl dd.radio label input {
width: 3vw;
height: 3vw;
margin: 0 2vw 0 0;
}
#contact .inc form p {
font-size: 3vw;
text-align: left;
}
#contact .inc form .submitbtn span input {
padding: 2vw 0;
font-size: 7vw;
}
#contact .inc form .submitbtn span i {
width: 7vw;
height: 7vw;
margin-right: 23vw;
}
#contact .inc form .submitbtn span i img {
width: 7vw;
height: 7vw;
}
}  #contact .inc form .p-formDetails__item .p-formDetails__itemContent select {
background-image: url(https://mabp.co.jp/wp/wp-content/themes/uniontheme/2022_req/img/selectbox.png);
background-repeat: no-repeat;
background-position: right 8px center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-size: 18px;
}