@charset "UTF-8";
/* ------------------------------------------ reset ------------------------------------------ */
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-style:normal;
    font-weight: normal;
    vertical-align: baseline;
    box-sizing:border-box;
    -webkit-appearance:none;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
html {
    font-size: 62.5%;
}

/* ------------------------------------------ カスタムプロパティ ------------------------------------------ */
:root{
    --font-sanserif: "Helvetica Neue", Arial, "Hiragino Kaku Gothic Pro", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    --font-serif: "Hiragino Mincho Pro", "Times New Roman", "Yu Mincho", serif;
    --font-size-xxxs: 1.0rem;
    --font-size-xxs: 1.1rem;
    --font-size-xs: 1.2rem;
    --font-size-s: 1.4rem;
    --font-size-m: 1.6rem;
    --font-size-l: 1.8rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 2.2rem;
    --font-size-xxxl: 2.4rem;
    --red:#EB0015;
    --white: #ffffff;
    --black: #000000;
    --yellow-600: #fbe779;
    --yellow-900: #f3d723;
    --grey-50:#fafafa;
    --grey-100:#cccccc;
    --grey-300:#757575;
    --grey-600:#666666;
    --grey-900:#333333;
    --brand-color-50:#eef5f7;
    --brand-color-100:#c3dee8;
    --brand-color-300:#9dc8d8;
    --brand-color-600:#7eadbb;
    --brand-color-900:#579bab;
    --pc-body-width: 1000px;
}

/* ------------------------------------------ 初期設定 ------------------------------------------ */
body {
    font-family: var(--font-sanserif);
    line-height:1.6;
    -webkit-text-size-adjust: 100%;
    font-size: var(--font-size-m);
    color:var(--grey-900);
    background-color: var(--white);
    box-sizing: border-box;
    margin: 0px auto !important;
    word-wrap: break-word;
    font-weight: 500;
    letter-spacing: 0.01em;
}
a {
    text-decoration:none!important;
    color:#005bab;
}
a:hover {
    opacity:0.8;
}
.remodal,.remodal-overlay { display: none;}

img{
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}
::selection {background: #fbe779 ; color: #333333 ;}
::-moz-selection {background: #fbe779 ; color: #333333 ;}

/* ------------------------------------------ 共通UI ------------------------------------------ */
a:hover .img{
    transform: scale(1.05);
}
.img{
    transform: scale(1);
    transition: .3s ease-in-out;
}
.button{
    width: fit-content;
    border: none;
    outline: none;
    font: inherit;
    text-align: center;
    color: inherit;
    background: none;
    margin-inline: auto;
    display: block;
    cursor: pointer;
}
.button:hover{
    opacity: 0.7;
}
.article_date {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    color: var(--grey-900);
}
.txt_color_black{
    color:var(--grey-900);
}
.btn_outline{
    border-radius: calc(infinity * 1px);
    border: solid 1px currentColor;
    padding: 10px 60px;
    font-size: 1.4rem;
}
.shape_circle {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
}
.arrow-right {
    display: inline-block;
    vertical-align: middle;
    color: currentColor;
    line-height: 1;
    position: relative;
    width: 1.5em;
    height: 0.01em;
    background: currentColor;
    margin:  0 0 0 10px;
    vertical-align: super;
}
.arrow-right::before {
    content: '';
    width: 0.65em;
    height: 0.65em;
    border: 0.01em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
}
.category_type {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}
.category_type .category_txt{
    content: '';
    display: block;
    font-size: 1.2rem;
    padding: 0;
    color: var(--grey-900);
    font-weight: 500;
}
.category_type::before,
.category_type::after {
    background-color: var(--brand-color-900);
    content: "";
    height: 3px;
    width: 7px;
}
.category_type::before {
    margin-right: 5px;
}
.category_type::after {
    margin-left: 5px;
}

.category2::before{ content: 'Love';}
.category5::before{ content: 'Beauty';}
.category6::before{ content: 'Health';}
.category7::before{ content: 'Fashion';}
.category8::before{ content: 'Life Style';}
.category11::before{ content: 'Entertainment';}
.category12::before{ content: 'Recipe';}
.category10::before{ content: 'Enjoy';}
.category12::before{ content: 'Recipe';}
.category13::before{ content: 'Interior';}
.category14::before{ content: 'Nail';}
.category15::before{ content: 'Hair Style';}
.category16::before{ content: 'Fortune';}
.category18::before{ content: 'Travel';}
.category19::before{ content: 'Career';}




/*== margin , padding =======================*/
.m0  { margin:        0!important }
.mt0 { margin-top:    0!important }
.mr0 { margin-right:  0!important }
.mb0 { margin-bottom: 0!important }
.ml0 { margin-left:   0!important }

.m5  { margin:        5px!important }
.mt5 { margin-top:    5px!important }
.mr5 { margin-right:  5px!important }
.mb5 { margin-bottom: 5px!important }
.ml5 { margin-left:   5px!important }

.m10  { margin:        10px!important }
.mt10 { margin-top:    10px!important }
.mr10 { margin-right:  10px!important }
.mb10 { margin-bottom: 10px!important }
.ml10 { margin-left:   10px!important }

.m15  { margin:        15px!important }
.mt15 { margin-top:    15px!important }
.mr15 { margin-right:  15px!important }
.mb15 { margin-bottom: 15px!important }
.ml15 { margin-left:   15px!important }

.m20  { margin:        20px!important }
.mt20 { margin-top:    20px!important }
.mr20 { margin-right:  20px!important }
.mb20 { margin-bottom: 20px!important }
.ml20 { margin-left:   20px!important }

.m25  { margin:        25px!important }
.mt25 { margin-top:    25px!important }
.mr25 { margin-right:  25px!important }
.mb25 { margin-bottom: 25px!important }
.ml25 { margin-left:   25px!important }

.m30  { margin:        30px!important }
.mt30 { margin-top:    30px!important }
.mr30 { margin-right:  30px!important }
.mb30 { margin-bottom: 30px!important }
.ml30 { margin-left:   30px!important }

.m35  { margin:        35px!important }
.mt35 { margin-top:    35px!important }
.mr35 { margin-right:  35px!important }
.mb35 { margin-bottom: 35px!important }
.ml35 { margin-left:   35px!important }

.m40  { margin:        40px!important }
.mt40 { margin-top:    40px!important }
.mr40 { margin-right:  40px!important }
.mb40 { margin-bottom: 40px!important }
.ml40 { margin-left:   40px!important }

.m45  { margin:        45px!important }
.mt45 { margin-top:    45px!important }
.mr45 { margin-right:  45px!important }
.mb45 { margin-bottom: 45px!important }
.ml45 { margin-left:   45px!important }

.m50  { margin:        50px!important }
.mt50 { margin-top:    50px!important }
.mr50 { margin-right:  50px!important }
.mb50 { margin-bottom: 50px!important }
.ml50 { margin-left:   50px!important }

.m60  { margin:        60px!important }
.mt60 { margin-top:    60px!important }
.mr60 { margin-right:  60px!important }
.mb60 { margin-bottom: 60px!important }
.ml60 { margin-left:   60px!important }

.m70  { margin:        70px!important }
.mt70 { margin-top:    70px!important }
.mr70 { margin-right:  70px!important }
.mb70 { margin-bottom: 70px!important }
.ml70 { margin-left:   70px!important }

.m80  { margin:        80px!important }
.mt80 { margin-top:    80px!important }
.mr80 { margin-right:  80px!important }
.mb80 { margin-bottom: 80px!important }
.ml80 { margin-left:   80px!important }

.m90  { margin:        90px!important }
.mt90 { margin-top:    90px!important }
.mr90 { margin-right:  90px!important }
.mb90 { margin-bottom: 90px!important }
.ml90 { margin-left:   90px!important }

.m100  { margin:        100px!important }
.mt100 { margin-top:    100px!important }
.mr100 { margin-right:  100px!important }
.mb100 { margin-bottom: 100px!important }
.ml100 { margin-left:   100px!important }

.m_auto{ margin:        auto!important }
.mt_auto { margin-top:    auto!important }
.mr_auto { margin-right:  auto!important }
.mb_auto { margin-bottom: auto!important }
.ml_auto { margin-left:   auto!important }

.p0  { padding:		   0 }
.pt0 { padding-top:    0!important }
.pr0 { padding-right:  0 }
.pb0 { padding-bottom: 0 }
.pl0 { padding-left:   0 }

.p5  { padding: 	   5px }
.pt5 { padding-top:    5px }
.pr5 { padding-right:  5px }
.pb5 { padding-bottom: 5px }
.pl5 { padding-left:   5px }

.p10  { padding: 	   10px }
.pt10 { padding-top:   10px }
.pr10 { padding-right: 10px }
.pb10 { padding-bottom:10px }
.pl10 { padding-left:  10px }

.p15  { padding:  	   15px }
.pt15 { padding-top:   15px }
.pr15 { padding-right: 15px }
.pb15 { padding-bottom:15px }
.pl15 { padding-left:  15px }

.p20  { padding:   	   20px }
.pt20 { padding-top:   20px }
.pr20 { padding-right: 20px }
.pb20 { padding-bottom:20px }
.pl20 { padding-left:  20px }

.p25  { padding:   	   25px }
.pt25 { padding-top:   25px }
.pr25 { padding-right: 25px }
.pb25 { padding-bottom:25px }
.pl25 { padding-left:  25px }

.p30  { padding:   	   30px }
.pt30 { padding-top:   30px }
.pr30 { padding-right: 30px }
.pb30 { padding-bottom:30px }
.pl30 { padding-left:  30px }

.p35  { padding:   	   35px }
.pt35 { padding-top:   35px }
.pr35 { padding-right: 35px }
.pb35 { padding-bottom:35px }
.pl35 { padding-left:  35px }

.p40  { padding:   	   40px }
.pt40 { padding-top:   40px }
.pr40 { padding-right: 40px }
.pb40 { padding-bottom:40px }
.pl40 { padding-left:  40px }

.p45  { padding:   	   45px }
.pt45 { padding-top:   45px }
.pr45 { padding-right: 45px }
.pb45 { padding-bottom:45px }
.pl45 { padding-left:  45px }

.p50  { padding:   	   50px }
.pt50 { padding-top:   50px }
.pr50 { padding-right: 50px }
.pb50 { padding-bottom:50px }
.pl50 { padding-left:  50px }

.p60  { padding:   	   60px }
.pt60 { padding-top:   60px }
.pr60 { padding-right: 60px }
.pb60 { padding-bottom:60px }
.pl60 { padding-left:  60px }

.p70  { padding:   	   70px }
.pt70 { padding-top:   70px }
.pr70 { padding-right: 70px }
.pb70 { padding-bottom:70px }
.pl70 { padding-left:  70px }

.p80  { padding:   	   80px }
.pt80 { padding-top:   80px }
.pr80 { padding-right: 80px }
.pb80 { padding-bottom:80px }
.pl80 { padding-left:  80px }

.p90  { padding:   	   90px }
.pt90 { padding-top:   90px }
.pr90 { padding-right: 90px }
.pb90 { padding-bottom:90px }
.pl90 { padding-left:  90px }

.p100  { padding:   	100px }
.pt100 { padding-top:   100px }
.pr100 { padding-right: 100px }
.pb100 { padding-bottom:100px }
.pl100 { padding-left:  100px }


/*== font =======================*/
.size10{ font-size:10px!important }
.size11{ font-size:11px!important }
.size12{ font-size:12px!important }
.size13{ font-size:13px!important }
.size14{ font-size:14px!important }
.size16{ font-size:16px!important }
.size18{ font-size:18px!important }
.size20{ font-size:20px!important }
.size22{ font-size:22px!important }
.size24{ font-size:24px!important }
.size26{ font-size:26px!important }
.size28{ font-size:28px!important }
.size30{ font-size:30px!important }
.size32{ font-size:32px!important }
.size34{ font-size:34px!important }
.size36{ font-size:36px!important }
.size38{ font-size:38px!important }
.size40{ font-size:40px!important }
.size50{ font-size:50px!important }
.size60{ font-size:60px!important }
.size70{ font-size:70px!important }
.size80{ font-size:80px!important }
.size90{ font-size:90px!important }
.size100{ font-size:100px!important }

.normal{font-weight: normal;}
.bold { font-weight:bold }
.indent li { text-indent: -1.5em; margin-left: 1.5em;}
.indent_dot li { text-indent: -1.5em; margin-left: 1.5em;}
.lighter{ font-weight: lighter;}


/*== width =======================*/
.w100 { width:100%; }
.w95 { width:95%; }
.w50 { width:50%; }
.w25 { width:25%; }


/*== link =======================*/
.link_underline a             { text-decoration:underline }
.link_underline a:hover       { text-decoration:none }
.link_underline_hover a:hover { text-decoration:underline; /* background:none */ }


/*== display =======================*/
.inline				{ display: inline!important }
.block				{ display: block!important }
.inline-block		{ display: inline-block!important }
.inline-block-li li { display: inline-block!important }
.table				{ display: table!important }
.table-cell			{ display: table-cell!important }
.none			{ display: none!important }
@media screen and (min-width: 1023px) {
	.pc_hide{
		display: none;
	}
}
@media screen and (max-width: 1023px) {
    .sp_hide{
        display: none;
    }
}

/*== overflow =======================*/
.overflow-hidden { overflow: hidden }
.overflow-scroll { overflow: scroll }
.overflow-auto   { overflow: auto }


/*== ellipsis =======================*/
.ellipsis {
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*== float =======================*/
.float-left  { float: left!important }
.float-right { float: right!important }
.list_float_left li  { float:  left }
.list_float_right li { float:  right }


/*== align =======================*/
.align-left   { text-align:left!important }
.align-center { text-align:center!important }
.align-right  { text-align:right!important }
.valign-top    { vertical-align: top!important }
.valign-middle { vertical-align: middle!important }
.valign-bottom { vertical-align: bottom!important }
.valign-tbottom { vertical-align: text-bottom}
.valign-initial { vertical-align: initial!important }


/*== position =======================*/
.relative { position:relative; }
.absolute { position:absolute; }


/*== line-height =======================*/
.lh_13{line-height: 1.3;}

/*== color =======================*/
.main_color{color: var(--grey-900);}
.icon_yellow{color: var(--yellow-600);}