@charset "UTF-8";
article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
display: block;
}

/*======================================================================
  Reset CSS for HTML5
======================================================================*/
html, 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, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, main, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    transition: all 0.2s ease-in-out;
}
a img{
    transition: all 0.2s ease-in-out;
}
img {
    max-width: 100%;
    height: auto;
    line-height: 1.5;
}

/*======================================================================
  BASIC
======================================================================*/
html,body {
    box-sizing: border-box;
    height: 100%;
}
html {
    font-size: 62.5%;
}
body {
    line-height: 1.5;
    font-family: "Yu Gothic" , "Yu Gothic UI" , "Segoe UI" , "游ゴシック" , "Meiryo" , "Meiryo UI" , "メイリオ" , "Hiragino Sans" , "Sanfrancisco" , "Hiragino Kaku" , "Gothic ProN" , "Helvetica Neue" , "Noto Sans CJK JP" , "Roboto" , sans-serif;
    font-size: 1.6rem;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    color: #4E567B;
    background-color: #ffffff;
}

h1,
h2,
h2 a,
h2 span
h3,
h3 a,
h4,
h4 a,
h4 span,
h5,
h5 a,
h5 span {
    font-weight: bold;
}

p { line-height: 1.5; }

a img:hover {
    opacity: .5;
}
a:hover {
    opacity: .5;
}

.scale {
    display: inline-block;
    overflow: hidden;
    border-radius: 20px;
}
.scale a img:hover {
    transform: scale(1.2);
    opacity: 1;
}
.scale a:hover,
header .mv a .logo img:hover {
    opacity: 1;
}

a {
    text-decoration: none;
    color: var(--color-blue);
}

:root{
/* color */
    --color-white: #FFFFFF;
    --color-blue: #4E567B;
    --color-gradation-primary: linear-gradient(90deg, #4161C7 0%, #538CAD 30.29%, #69D961 100%);
    --color-gradation-secondary: linear-gradient(180deg, #99C9FD 0%, #D5E9FF 100%);
    --color-gradation-footer: linear-gradient(90deg, #7EBCF2 0%, #63A0D6 100%);
    --color-gradation-recommend: linear-gradient(88deg, #70EB9F -2.79%, #51A0CE 29.58%, #63A0D6 62.46%, #98AEF7 100.82%);
}

h1 {
    font-size: 2.4rem;
}
h2 {
    font-size: 2.6rem;
}
h3,h4 {
    font-size: 2rem;
}

@media screen and (max-width: 480px){
    h1 {
    font-size: 2rem;
    }
    h2 {
    font-size: 2.4rem;
    }
    h3 {
    font-size: 2rem;
    }
}

/*======================================================================
  FORMAT
======================================================================*/
/* block class */
.main {
    max-width: 768px;
}
.boxWrap {
    overflow: hidden;
	max-width: 768px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* float */
.fl { float: left;}
.fr { float: right;}

/* img */
.img {
    display: block;
    position: relative;
    overflow: hidden;
}

/* trimming */
.trimming {
    display: block;
    position: relative;
    width: 100%;
    min-height: 150px;
    aspect-ratio: 18 / 5;
    border-radius: 16px;
    overflow: hidden;
}
.trimming img {
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    width: 100%;
    height: auto;
    margin: auto;
}

/*======================================================================
  link
======================================================================*/

.link_item {
    display: inline-block;
    margin: 1em 0;
    margin-inline: auto;
}

/*======================================================================
  HEADER
======================================================================*/

/*ハンバーガーボタン*/
.el_hamburger {
    position: absolute;
    top: 128px;
    right: calc(50% - 225px + 24px);
    margin-right: 24px;
    z-index: 10000;
    cursor: pointer;
    max-width: 96px;
    width: 100%;
    height: 27px;
    background: url(images/hum.png)no-repeat;
    font-size: 0;
    transition: all 0.2s ease-in-out;
}
@media (hover: hover) {
    .el_hamburger:hover {
        background: url(images/hum_hover.png)no-repeat;
    }
}

/*ナビゲーション*/
.uq_spNavi {
    display: none;
}
.uq_spNavi.js_appear {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
    z-index: 9999;
}
.uq_spNavi_screen {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color:#ffffff;
    z-index: 0;
    margin-top: 0;
    padding-top: 0;
    overflow: auto;
}
.gnav {
    padding-top: 160px;
}
.gnav ul {
    max-width: 768px;
    padding: 24px;
    margin: 0 auto;
}
.gnav li {
    border-bottom: var(--color-blue) 1px solid;
    padding: 16px;
}
.gnav li:first-child {
    border-top: var(--color-blue) 1px solid;
}
.gnav li a {
    display: block;
    font-weight: bold;
    text-align: center;
}

/* header - global navi */
header{
    max-width: 768px;
    margin: 0 auto;
}
.mv {
    position: relative;
    width: 100%;
    height: 390px;
}
.mv::after {
    position: absolute;
    content: "";
    max-width: 768px;
    width: 100%;
    height: 100px;
    bottom: 0;
    background: url(images/Vector.svg);
}
.mvbox{
    position: relative;
    width: 100%;
    height: 390px;
    margin: 0 auto;
    background: url(images/mv.png)no-repeat center;
}
h1 {
    text-align: left;
    padding: 32px 24px 24px;
    color: var(--color-white);
}
.mainbox {
    position: absolute;
    width: 100%;
    max-width: 450px;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mainbox_inner {
    display: flex;
    padding: 24px;
    margin: 0 24px;
    max-width: 450px;
    justify-content: space-between;
    align-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.50);
}
header .logo {
    max-width: 174px;
    width: 100%;
    height: 35px;
}

/* breadcrumb */
.breadcrumb {
    margin: 0 auto;
    padding: 0 24px 24px;
}
.breadcrumb ul li {
	display: inline-block;
	margin-left: 5px;
}
.breadcrumb ul li a span {
	font-weight: bold;
    transition: all 0.2s ease-in-out;
}
.breadcrumb ul li img {
	padding-right: 4px;
}
.breadcrumb ul li a span img:hover {
	opacity: 1;
}

/*======================================================================
  FOOTER
======================================================================*/
footer {
    padding: 40px 0;
    text-align: center;
    background-image: var(--color-gradation-footer);
}
footer nav div ul {
    display: flex;
    text-align: left;
    gap: 56px;
}
footer nav div li {
    width:100%;
}
footer nav div ul li a {
    position: relative;
    display: inline-block;
    color: var(--color-white);
    font-weight:bold;
}
footer > div > a {
    display: inline-block;
    margin: 32px 0;
}
footer div > small {
    display: block;
    color: var(--color-white);
    margin-top: 40px;
    padding-top: 40px;
    border-top: solid 1px var(--color-white);
}
div.center a {
    display: block;
}

/*======================================================================
  RECOMMEND
======================================================================*/
.recommend {
    padding-bottom: 40px;
}
.recobox{
    padding: 24px;
    border-radius: 16px;
    color: var(--color-white);
    background: var(--color-gradation-recommend);
}
.recommend h2 {
    display: flex;
    gap: 16px;
    text-align: left;
    margin-bottom: 32px;
    align-items: center;
}
.recommend h2::before {
    content: "";
    position: relative;
    display: inline-block;
    min-width: 51px;
    height: 70px;
    background: url(images/recommend_ico.png)no-repeat center / cover;
}
.recommendList div {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.recommendList div a h3 {
    position: absolute;
    z-index: 10;
    color: var(--color-white);
    background-color: #63A0D6;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 1.6rem;
    margin: 20px;
}
.recommendList div > h3 a {
    color: var(--color-white);
}


/* button */
.arrow{
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.arrowtext_wrap{
    position: relative;
    width: 190px;
    min-width: 190px;
    padding: 17px 57px 17px 33px;
    border-radius: 999px;
    box-sizing: border-box;
    background: var(--color-white);
    font-weight: bold;
    margin: 0 0 0 auto;
    transition: none;
}
.arrowtext{
    background: var(--color-white);
    background-image: var(--color-gradation-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 1;
    font-size: 2rem;
    font-weight: bold;
}
.arrowtext_wrap::before{
    content: "";
    position: absolute;
    width: 11px;
    height: 13px;
    right: 32px;
    top: 50%;
    margin: -6px;
    background: url(images/moreico_grd.png) no-repeat;
}

/* button hover */
.arrowtext_wrap:hover{
    opacity: 1;
    background: var(--color-gradation-primary);
}
.arrowtext_wrap:hover .arrowtext{
    background: var(--color-white);
    background-image: var(--color-white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 1;
}

.arrowtext_wrap:hover::before{
    background: url(images/moreico.png)no-repeat;
}
.arrowtext_wrap::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 999px;
    padding: 1px;
    background: var(--color-gradation-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}


/*======================================================================
  INDEX
======================================================================*/
.index h2 {
    margin-bottom: 32px;
    background: var(--color-gradation-primary);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
}
.indexHeader{
    display: flex;
    gap: 24px;
    margin-bottom: 60px;
}
.indexHeader p{
    max-width: 500px;
    height: 140px;
    box-sizing: border-box;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--color-white);
    padding: 43px 32px;
    border-radius: 16px;
    background: url(images/indexImg.png)no-repeat;
}
.indexHeader>img{
    padding-top: 44px;
}

.indexdetail {
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
    gap: 24px;
}
.indexdetail li {
    background: var(--color-gradation-secondary);
    padding: 24px;
    border-radius: 16px;
}
.indexdetail li h3 {
    margin-bottom: 16px;
}
.indexdetail li:hover {
    background: linear-gradient(180deg, rgba(65, 97, 199, 0.60) 0%, rgba(83, 140, 173, 0.60) 30.29%, rgba(105, 217, 97, 0.60) 100%);
}

/*indexCategory*/
.index a:hover,
.index a:hover img {
    opacity: 1;
}

/*indexPost*/

.indexPost li {
    border-bottom: #e5ebf0 1px solid;
}
.indexPost li:first-child {
    border-top: #e5ebf0 1px solid;
}

/*======================================================================
  CATEGORY
======================================================================*/
.category{
    padding-bottom: 60px;
}
.category h2 {
    font-size: 3.2rem;
    margin-bottom: 60px;
    background: var(--color-gradation-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.category>h3 {
    font-size: 2.6rem;
    padding-bottom: 32px;
}
.categoryPost {
    display: flex;
    padding-top: 24px;
    flex-direction: column;
    gap: 24px;
    border-top: 1px solid #A4B1DB;
}
.categoryPost li {
    padding-bottom: 24px;
    border-bottom: 1px solid #A4B1DB;
}
.categoryPost h4 {
    margin-bottom: 24px;
}
.cat_box{
    display: flex;
    gap: 24px;
}
.categoryPost .cat_box > a {
    display: block;
    min-width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 16px;
}
.cat_box_inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* button */
.more{
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.moretext{
    position: relative;
    width: 190px;
    min-width: 190px;
    padding: 17px 57px 17px 33px;
    border-radius: 999px;
    box-sizing: border-box;
    background: var(--color-gradation-primary);
    color: var(--color-white);
    font-weight: bold;
    font-size: 2rem;
}
.moretext::before{
    content: "";
    position: absolute;
    width: 11px;
    height: 13px;
    right: 32px;
    top: 50%;
    margin: -6px;
    background: url(images/moreico.png)no-repeat;
}

/* button hover */
.moretext:hover{
    background: var(--color-white);
    background-image: var(--color-gradation-primary);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
    opacity: 1;
}
.moretext:hover::before{
    background: url(images/moreico_grd.png)no-repeat;
}
.moretext:hover::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 999px;
    padding: 1px;
    background: var(--color-gradation-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

/*======================================================================
  DETAIL
======================================================================*/
.detail{
    margin-bottom: 60px;
}
.detailHeader h2 {
    margin-bottom: 16px;
}
.detailPost .trimming{
    margin-bottom: 24px;
}

/* detail - post head */
.detailPost {
    margin-top: 60px;
}
.detailPost h3 {
    padding-left: 24px;
    margin-bottom: 24px;
    border-left: 4px solid var(--blue-01, #4161C7);
}
.detailPost h3:not(:first-of-type) {
    margin-top: 32px;
}
.detailPost p {
    text-align: left;
}
.detailPost a {
    color: #009f38;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    footer nav div ul{
        flex-direction: column;
        gap: 16px;
    }
    .indexHeader{
    flex-direction: column;
    }
    .indexHeader img{
        padding-top: 0;
    }
    .cat_box{
        flex-direction: column;
    }
    .categoryPost .cat_box > a {
    min-width: 100%;
    }
}
@media screen and (max-width: 400px) {
    .indexHeader p{
    padding: 24px 24px;
    }
    .mainbox_inner{
        flex-direction: column;
    }
    .el_hamburger {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    top: calc(128px + 60px);
    }
    .gnav{
        padding-top: 210px;
    }
}
/* お問い合わせエラー画面の編集 */
.screen-reader-response {
    display: none;
}
.wpcf7-not-valid-tip {
    color: #dc3232;
}
.wpcf7 form.invalid .wpcf7-response-output {
    border: 2px solid #ff0000;
    padding: 10px;
    margin-top: 10px;
}
.wpcf7 form.sent .wpcf7-response-output {
    border: 2px solid #00fa9a;
    padding: 10px;
    margin-top: 10px;
}

/* お問い合わせ項目の修正 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea{
	width: 100%;
	box-sizing: border-box;
	padding: 5px;
	border: 1px solid #ccc;
}
.wpcf7 input[type="date"] {
	box-sizing: border-box;
	padding: 5px;
	border: 1px solid #ccc;
	color: #ccc;
}
.wpcf7 p{
	margin-bottom: 15px;
}
.wpcf7 input[type="submit"]{
	padding: 17px 33px;
	border-radius: 999px;
	box-sizing: border-box;
	background: var(--color-gradation-primary);
	color: var(--color-white);
	font-weight: bold;
	border: 0;
	font-size: 100%;
}
.wpcf7 input[type="submit"]:hover{
	background: var(--color-white);
	background-image: var(--color-gradation-primary);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 1;
	border: 1px solid #538CAD;
}