@charset "utf-8";
:root {
 --c-dark: rgba(51, 51, 51, 1);
 --c-dark_10: rgba(51, 51, 51, .1);
 --c-dark_20: rgba(51, 51, 51, .2);
 --c-dark_30: rgba(51, 51, 51, .3);
 --c-dark_40: rgba(51, 51, 51, .4);
 --c-dark_50: rgba(51, 51, 51, .5);
 --c-dark_60: rgba(51, 51, 51, .6);
 --c-dark_70: rgba(51, 51, 51, .7);
 --c-dark_80: rgba(51, 51, 51, .8);
 --c-dark_90: rgba(51, 51, 51, .9);
 --c-white: rgba(255, 255, 255, 1);
 --c-white_10: rgba(255, 255, 255, .1);
 --c-white_20: rgba(255, 255, 255, .2);
 --c-white_30: rgba(255, 255, 255, .3);
 --c-white_40: rgba(255, 255, 255, .4);
 --c-white_50: rgba(255, 255, 255, .5);
 --c-white_60: rgba(255, 255, 255, .6);
 --c-white_70: rgba(255, 255, 255, .7);
 --c-white_80: rgba(255, 255, 255, .8);
 --c-white_90: rgba(255, 255, 255, .9);
 --c-background: rgba(246, 246, 246, 1);
 --c-base: rgba(51, 51, 51, 1);
 --c-main: rgba(11, 48, 128, 1);
 --c-border: rgba(193, 193, 193, 1);
 --c-header: rgba(246, 246, 246, 1);
 --c-footer: rgba(246, 246, 246, 1);
 --font-size_base: 62.5%;
 --font-size_xs: 1rem;
 --font-size_s: 1.2rem;
 --font-size_m: 1.4rem;
 --font-size_l: 1.6rem;
 --font-size_xl: 1.8rem;
 --font-size_xxl: 2.4rem;
 --font-size_xxxl: 3.4rem;
 --pd-inr-side: 40px;
 --h-header: 9rem;
 --h-footer: 27rem;
 --h-slider: 80rem;
 --w-content: 106rem;
 --w-button: 23rem;
 --w-side: 25rem;
 --b-radius: 4px;
 --h-slider: 50rem
}
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
tr,
td,
th,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
 background: 0 0;
 border: 0;
 border-spacing: 0;
 font-style: normal;
 font-weight: 400;
 list-style: none;
 margin: 0;
 outline: 0;
 padding: 0;
 text-decoration: none;
 vertical-align: baseline
}

html {
 font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","小塚ゴシック","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
 font-size: var(--font-size_base);
 line-height: 1
}
a,
address {
 color: var(--c-dark);
 text-decoration: none;
 font-style: normal
}
a:visited {
}
@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap';
*,*:before,*:after {
 box-sizing:border-box
}
html {
 box-sizing:border-box;
 height:100%
}
body {
 background:var(--c-background);
 color:var(--c-base);
 height:100%
}
image {
 display:block;
 width:100%
}
.c-strong {
 font-weight:700
}
.p-section {
 margin-bottom:8rem
}
.p-section>.l-inner {
 margin:0 auto;
 padding:0 var(--pd-inr-side);
 max-width:var(--w-content)
}
.p-section h3 {
 font-size:20px;
 font-weight:700;
 letter-spacing:.1em;
 margin-bottom:1.7rem;
 padding:0
}

@media screen and (max-width:767px) {
.p-section h3 {
 font-size:15px;
 margin-bottom:1rem;
}
}

.p-sec_content .c-item {
 background:var(--c-white);
 border:1px solid #ccc;
 border-radius:14px;
 padding:3.5rem 4rem
}
@media screen and (max-width:767px) {
 .p-section>.l-inner {
  padding:0 20px;
 }
 .p-sec_content .c-item {
  padding:3.5rem 1rem
 }
}
.l-flex {
 display:flex;
 flex-wrap:wrap
}
.l-row {
 align-items:center;
 display:flex;
 height:100%;
 justify-content:space-between
}
.c-button {
 align-items:center;
 background:var(--c-white);
 border:2px solid #333;
 border-radius:5rem;
 cursor:pointer;
 display:flex;
 font-size:16px;
 justify-content:center;
 padding:1.3rem 0;
 position:relative;
 transition:.3s ease;
 width:var(--w-button)
} 

@media screen and (max-width:767px) {
.c-button {
 font-size:13px;
} 
}

.c-button span {
 font-weight:600;
}

.c-button:hover {
 background:var(--c-main);
 border-color:var(--c-main);
 color:var(--c-white)
}
.c-button.el-arrow:after {
 background:url(../images/icon/icon-arrow_diagonal_right_thin_black.svg) center center/100% no-repeat;
 content:"";
 display:block;
 height:1rem;
 position:absolute;
 right:1.8rem;
 top:50%;
 transform:translateY(-50%);
 width:.9rem
}
.c-button.el-arrow:hover:after {
 background-image:url(../images/icon/icon-arrow_diagonal_right_thin_white.svg)
}
.p-block_button {
 align-items:center;
 display:flex
}
.p-block_button.el-single {
 justify-content:center
}
.c-anchor {
 align-items:center;
 display:flex;
 justify-content:flex-start
}
.c-text {
 font-size:var(--font-size_xl);
 line-height:1.6;
 letter-spacing: 0.1rem;
}
@media screen and (max-width:767px) {
 .c-text {
  font-size:1.4rem
 }
}
.c-imagewrap {
 display:block
}
.c-imagewrap img {
 width:100%
}
.c-icon {
 background:center center/100% no-repeat;
 display:inline-block
}
.c-icon.u-blank {
 background-image:url(../images/icon/icon-newwindow_typeb_black.svg);
 height:1.2rem;
 width:1.2rem
}
.p-header {
  /*background:var(--c-header);*/
  /*box-shadow:0 3px 30px rgb(0 0 0/12%);*/
 position:fixed;
 top:0;
 width:100%;
 z-index:10
}
.p-header .l-inner {
 height:9rem;
 padding:1.4rem var(--pd-inr-side) 0
}
@media screen and (max-width:767px) {
 .p-header {
  padding:5px 0
 }
 .p-header>.l-inner {
  height:6rem;
  padding:0 2rem
 }
}
.p-header .c-imagewrap.u-logo_header {
 width:16rem
}
@media screen and (max-width:767px) {
 .p-header .c-imagewrap.u-logo_header {
  width:12.4rem
 }
}
.p-header .c-imagewrap.u-cart {
 padding:0 7px 0 0;
 width:4.6rem
}
.p-header .c-text.el-store {
 color:var(--c-main);
 display:block;
 font-size:1.2rem;
 font-weight:700;
 letter-spacing:.1em;
 text-align:center
}
@media screen and (max-width:767px) {
 .p-header .c-imagewrap.u-cart {
  width:4rem
 }
}
.p-main {
 font-size:var(--font-size_l);
 min-height:calc(100vh - var(--h-footer));
 padding:var(--h-header) 0 0
}
@media screen and (max-width:767px) {
 .p-main {
  font-size:var(--font-size_m);
  padding:6rem 0 0
 }
}


/*�t�b�^�[*/
.p-footer {
 background:var(--c-footer);
 color:var(--c-white);
 margin-top:15rem;
 padding:74px 0 90px
}

@media screen and (max-width:767px) {
.p-footer {
 margin-top:5rem;
 padding:0px
}
}

.p-footer a {
 color:var(--c-base)
}
.p-footer .c-footer_logo {
 height:auto;
 margin:0 auto;
 width:17rem
}
.p-footer .c-footer_bottom {
 margin:3.5rem 0 0
}
@media screen and (max-width:767px) {
.p-footer .c-footer_logo {
 width:13rem
}
.p-footer .c-footer_bottom {
 margin:2.3rem 0 0
}
}

.p-footer .c-footer_bottom .l-inner {
 margin:0 auto;
 max-width:var(--w-content);
 padding:1.8rem 3rem
}
.p-footer .c-footer_bottom .l-inner ul {
 justify-content:center
}
@media screen and (max-width:767px) {
 .p-footer .c-footer_bottom .l-inner {
  padding:0 0 20px;
 }
 .p-footer .c-footer_bottom .l-inner .l-flex {
  display:table;
  margin:auto;
 }
}
.p-footer .c-footer_bottom li:not(:first-of-type) {
 border-left:1px solid var(--c-base);
 margin-left:1rem;
 padding:0 0 0 2.5rem
}

@media screen and (max-width:767px) {
.p-footer .c-footer_bottom li:not(:first-of-type) {
 border-left:1px solid var(--c-base);
 margin-left:0px;
 padding:0 0 0 15px
 }
}

.p-footer .c-footer_bottom li:last-of-type {
 margin-right:2.5rem
}

@media screen and (max-width:767px) {
 .p-footer .c-footer_bottom li {
  margin-top:1rem;
  display:table-cell;
 }
}
.p-footer .c-footer_bottom .c-anchor {
 font-size:1.46rem
}

@media screen and (max-width:767px) {
.p-footer .c-footer_bottom .c-anchor {
 font-size:11px;
}
}
.p-footer .c-footer_bottom .c-anchor .c-anchortext {
 color:var(--c-base)
}
.p-footer .c-footer_bottom .c-anchor .c-icon.u-blank {
 margin:0 0 0 .4rem
}
.p-footer .c-footer_bottom small {
 font-size:1rem
}
@media screen and (max-width:767px) {
 .p-footer .c-footer_bottom small {
  display:block;
  margin:2.9rem 0 0;
  text-align:center
 }
}



.p-detailarea {
 padding:4.5rem var(--pd-inr-side) 12.8rem
}
.p-detailarea h2 {
  font-size: 40px;
  font-weight: normal;
  letter-spacing: .1em;
  line-height: 1.4;
  text-align: center;
}
.p-detailarea p {
 font-size:2.3rem;
 letter-spacing:.1em;
 margin:4rem 0 0;
 text-align:center
}


@media screen and (max-width:767px) {
 .p-detailarea {
  padding:1.5em 1rem 5.5rem
 }
 .p-detailarea h2 {
  font-size:var(--font-size_xxl)
 }
 .p-detailarea p {
  font-size:1.4rem;
  margin:2rem 0 0;
 }


}
.p-section.el-questionnaire .c-item {
 text-align:center
}
.p-section.el-questionnaire .c-item .p-block_button {
 margin-top:4rem
}