/*---------------------------
色
濃灰：#808080
薄灰：#e3e3e3

フォントサイズ
読ませるもの：16px
小さめにしたいとき：14px

ブレイクポイント
＜基本ルール＞
●メインはスマホ
●数値を決めるというよりは、崩れるところで切り替える
●大きくデザインを変える場合のブレイクポイント
スマホ／パッド：min-width:768px
パッド／PC：min-width:1025px
●トップページはホバーの有無でPCを判断

---------------------------*/

html { height:100%; }
body { font:normal normal normal 16px/1.5 'YuGothic','Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', 'Meiryo','Helvetica',sans-serif; min-height:100%; display:flex; flex-direction:column; }
* { font-feature-settings : "palt"; letter-spacing:0.05em;}
a { color: initial}
a:hover { text-decoration: none;color: initial}
li { list-style: none;}
ul { margin: 0; padding: 0}
dd { margin: 0}
button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
}

.pc_inline { display: none;}
.sp_inline { display: inline;}
@media screen and (min-width:768px){
    .pc_inline { display: inline;}
    .sp_inline { display: none;}
}

.wrapper { width:90%; margin:0 auto; display:block; }
.wrapper.is-h1-img-relative { position:relative; }/*タブレット縦でh1_imgをh1_copyの下に置くための基準*/
.h1_wrappers { width:100%; margin:80px 0 20px 0; display:flex; justify-content:space-between; align-items:center; position:relative; }
.h1_wrapper { width:auto; display:flex; align-items:center; gap:20px; line-height:1.2; }
.h1_number { font-weight:bold; font-size:14px; }
.h1 { font-size:24px; letter-spacing:0.08em; margin-bottom:0;}
.h1_en { display:flex; align-items:center; white-space:nowrap; position:absolute; right:0; top:0; writing-mode:vertical-rl; color:#e3e3e3; font-weight:bold; font-size:12px; }
.h1_en::before { content:''; width:5px; height:5px; margin-bottom:5px; display:block; background:#ff2000; }
.h1_copy { font-size:22px; margin:0 0 24px 0; letter-spacing:0.1em; text-align: justify; line-height:1.7em; }
.h1_img { display:block; position:static; width:100%; height:auto; margin-bottom:24px; z-index:auto; }
@media screen and (min-width:768px){
    .h1 { font-size:36px; }
    .h1_en { color:#808080; font-size:14px; }
    .h1_copy { font-size:30px; margin:0 0 20px 0; }
    .h1_img { width:579px; display:block; position:absolute; top:40px; right:40px; z-index:-1; }
}
@media screen and (min-width:768px) and (max-width:1024px){
    .h1_img { position:static; width:579px; height:auto; margin-bottom:24px; z-index:auto; }/*タブレット縦はh1_copyの下に通常表示、サイズはPCと同じ420px*/
    .is-h1-img-relative .h1_copy { margin-bottom:24px; }/*h1_imgが下に来るタブレット縦だけ、lower_page.cssの40px指定を上書き*/
}

/*パンくず用*/
.bread { width:100%; padding:70px 0 0; box-sizing:border-box; }
.bread_list { display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:0; }
.bread_item { display:flex; align-items:center; font-size:12px; color:#000; }
.bread_item:not(:last-child)::after { content:'>'; margin:0 6px; }
.bread_item span { color:#000; }
.bread + .wrapper .h1_wrappers { margin-top:40px; }
@media screen and (min-width:768px){
    .bread_item a { transition:0.3s; }
    .bread_item a:hover { opacity:0.5; }
}

/*header用*/
header { width:100%; padding:10px 0; position:fixed; top:0; z-index:10; background:rgba(255,255,255,0.7); border-bottom:1px solid #E3E3E3; }
.header_wrapper { display:flex; justify-content:space-between; align-items:center; }
.header_link a { margin-right:15px; font-weight:bold; }
.header_button { width:44px; height:44px; display:flex; align-items:center; justify-content:center; position:relative; z-index:10; cursor:pointer; }
.header_button span { width:24px; height:2px; display:block; background:#000; position:relative; transition:background-color 0.3s; }
.header_button span::before { content:''; width:100%; height:2px; display:block; background:#000; position:absolute; left:0; top:-6px; transition:top 0.5s, transform 0.5s; }
.header_button span::after { content:''; width:100%; height:2px; display:block; background:#000; position:absolute; left:0; top:6px; transition:top 0.5s, transform 0.5s; }
.header_button.active span { background:transparent; }
.header_button.active span::before { top:0; transform:rotate(210deg); }
.header_button.active span::after { top:0; transform:rotate(-210deg); }
.header_top { margin:-55px 0 10px 0; display:flex; align-items:center; gap:20px; font-size:14px; }
.header_top img { width:4px; transform:rotate(180deg); }
.header_menu { width:90%; max-width:650px; height:100%; padding:80px 30px 30px; box-sizing:border-box; background:rgba(255,255,255,1); position:fixed; top:0; right:0; z-index:9; overflow-y:auto; transform:translateX(100%); transition:transform 0.3s ease; }
.header_menu.active { transform:translateX(0); }
.header_menu_list li { /*border-bottom:1px solid #e3e3e3;*/padding:5px 0; }
.header_menu_list li a { padding:16px 0; display:block; font-size:14px; letter-spacing:0.1em; }
.header_menu_list li a:hover  { opacity:0.5; transition:0.3s; }
.header_nav_number { width:4em; display:inline-block; font-weight:bold; }
.header_nav_texts { display:inline-block; font-weight:bold; }
.header_nav_title { display:inline-block; }
.header_nav_title.is-current { color:#006CFF; }
.header_nav_text { display:none; }
.header_nav_en { display:none; }
.header_overlay { width:100%; height:100%; background:rgba(0,0,0,0.4); position:fixed; inset:0; z-index:8; opacity:0; visibility:hidden; transition:opacity 0.3s ease; }
.header_overlay.active { opacity:1; visibility:visible; }
body.menu_open { overflow:hidden; }
@media screen and (min-width:768px){
    .header_button { transition:0.3s; }
    .header_button:hover { opacity:0.5; transition:0.3s; }
    .header_button span { width:40px; }
    .header_button span::before { top:-8px; }
    .header_button span::after { top:8px; }
    .header_menu_list { margin-top:50px; }
    .header_nav_title { width:130px; display:inline-block; border-right:1px solid rgba(0,0,0,0.2); }
    .header_nav_text { width:350px; padding-left:10px; display:inline-block; font-weight:normal; }
    .header_nav_en { display:inline-block; color:#808080; font-weight:normal; }
}
@media screen and (min-width:1025px){
    header { padding:10px 0; }
}

/*footer用*/
footer { margin-top:auto; padding:30px 0 15px 0; border-top:1px solid #808080; background:#fff; position:relative; z-index:2; font-size:14px; line-height:1.2; }
.footer_wrapper { display:flex; justify-content:space-between; }

.footer_h2 { display:none; }
.footer_menu { display:none; }
@media screen and (min-width:1025px){
    footer { padding-top:50px; }
    .footer_h2 { margin:30px 0 20px 0; display:block; position:relative; z-index:2; font-weight:normal; font-size:32px; letter-spacing:0.15em; transition:color 0.3s ease; }
    .footer_menu { width:600px; padding-bottom:50px; display:block; position:relative; z-index:2; }
    .footer_nav { margin:30px 0; padding:0; display:block; border-bottom:none; position:relative; transition:0.3s; }
    /*.footer_nav::after { content:''; width:4px; height:100%; background:url(../img/arrow_b.svg) no-repeat 100% 50%; position:absolute; right:0; }*/
    .footer_nav:hover { opacity:0.5; transition:0.3s; }
    .footer_nav span { color:#000; text-decoration:none; letter-spacing:0.1em; opacity:1; transition:opacity 0.3s ease, letter-spacing 0.3s ease; }
    .footer_nav span.footer_nav_wrapper { width:100%; display:inline-block; font-size:14px; line-height:1.2; }
    .footer_nav span.footer_nav_number { width:4em; display:inline-block; font-weight:bold; }
    .footer_nav span.footer_nav_texts { display:inline-block; }
    .footer_nav span.footer_nav_title { width:130px; display:inline-block; border-right:1px solid rgba(0,0,0,0.2); font-weight:bold; }
    .footer_nav span.footer_nav_title.is-current { color:#006CFF; }
    .footer_nav span.footer_nav_text { width:350px; padding-left:10px; display:inline-block; font-weight:normal; }
    .footer_nav span.footer_nav_en { display:inline-block; color:#808080; font-weight:normal; }
}

.footer_links { display:flex; flex-direction:column; }
.footer_link { margin:10px 0 20px 0; display:inline-flex; flex-wrap:wrap; gap:10px 15px; align-items:center; position:relative; }
.footer_link a { display:inline-flex; flex-wrap:wrap; gap:10px; /*align-items:center;*/ position:relative; line-height:1.2; }
.footer_link img.footer_link_img_link { width:12px; margin-bottom:3px; }
.footer_link img.footer_link_img_arrow { width:4px; }
@media screen and (min-width:1025px){
    .footer_links { margin:20px 50px 0 0; }
    .footer_links .footer_links_title { margin-bottom:16px; }
    .footer_link { margin:10px 0 40px 0; flex-direction:column; align-items:baseline; gap:10px 0; }
    .footer_link a::after { content:''; width:100%; height:1px; display:block; background:currentColor; position:absolute; left:0; bottom:-2px; transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; }
    .footer_link a:hover::after { transform:scaleX(1); }
}

.footer_wrapper_will { margin-top:10px; line-height:1.2; }
.footer_will { display:inline-flex; flex-wrap:wrap; gap:10px; align-items:center; position:relative; font-weight:bold; }
.footer_will span { font-weight:normal; }
.footer_will img { width:4px; }
.footer_will img.top_on { display:none; }
@media screen and (min-width:1025px){
    
}
