@charset "utf-8";
/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    http://example.com/twenty-twenty-four-child/
 Description:  Twenty Twenty-Four Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentytwentyfour
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwentytour-child
*/

body { font-family: YakuHanJP, 'Noto Sans JP', 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", sans-serif!important; background-color: #fff; position: relative; }
html,body { padding: 0; margin: 0; }
nav:not(.mm-menu) { display: none; }

#header_pc { background-color: white;  }

#head1 { display: block; margin: 0; padding: 0 15px; }
#head1 .in { position: relative; width: 980px; height: 44px; margin: 0 auto; padding: 0; }
#head1 .in .logo { position: absolute; top: 13px; left: 0; width: 297px; height: 22px; text-indent: 0; background: none; }
#head1 .in .logo img:last-child { height: 18px; width: auto; margin-top: 2px; }
#head1 .in .logo a { display: inline; width: 214px; height: 20px; }
#head1 .in .navi { position: absolute; top: 12px; left: 370px; width: 350px; text-align: left; overflow: auto; }
#head1 .in .navi ul { margin: 0; padding: 0; float: right; }
#head1 .in .navi ul li { margin: 0 0 0 20px; padding: 0; list-style-type: none; float: left; line-height: 28px; }
#head1 .in .navi ul li a { padding-left: 0; color: #222; letter-spacing: 0.15em; font-size: 12px; letter-spacing: 0.05em; text-decoration: none; }
#head1 .in .navi ul li a:hover { color: #0066CC; }
#head1 .in .navi ul li.lang { padding-left: 23px; background: url(https://www.netage.ne.jp/common3/images/flag_uk.png) no-repeat left 11px; }
#head1 .in .parent { position: absolute; top: 5px; right: 0; width: 230px; text-align: right; }
#head1 .in .parent img { height: 40px; }

	
#head2 { display: block; margin: 0; height: 48px; border-bottom: 1px solid #E6E6E8; }
#head2 { margin: 0; padding: 0 15px; }
#head2 .in { width: 980px; height: 35px; margin: 0 auto; }
#head2 .in ul { margin: 0; padding: 2px 0 0; }
#head2 .in ul li { list-style-type: none; }
#head2 .in ul li a { display: block; float: left; line-height: 31px; width: 116px; width: calc(100%/9 - 6px); margin-right: 6px; padding: 0; overflow: hidden; font-size: 14px; text-align: center; }
#head2 .in ul li a { font-weight: bold; border-bottom: 3px solid #ddd; color: black; text-decoration: none; }
#head2 .in ul li a:hover { border-bottom: 3px solid #0066CC; color: #0066CC; }
#head2 .in ul li a.focus { border-bottom: 3px solid #0066CC; color: #0066CC; }
#head2 .in ul li#gm_biz a { float: right; width: 126px; margin-right: 0; }
#head2 .in ul li#gm_rakuten a { width: calc(100%/9); }
#head2 .in ul li#gm_cloud a { float: right; margin-right: 0; }


#head3 { display: block; margin: 0; border-bottom: 1px solid #E6E6E8; }
#head3 .in { width: 980px; margin: 0 auto; text-align: center; }
#head3 .in ul { margin: 0; padding: 2px 0; }
#head3 .in ul li { margin: 0 12px; padding: 0; display: inline; list-style-type: none; font-size: 13px; font-weight: bold; }
#head3 .in ul li a { line-height: 38px; color: black; font-size: 14px; font-weight: bold; text-decoration: none; }
#head3 .in ul li a.area { padding-left: 15px; background: url(/common/images/ic_area.gif) no-repeat left center; }
#head3 .in ul li a:hover { color: #0066CC; }
#head3 .in ul li.btn { margin: 0 17px; }
#head3 .in ul li.btn { margin: 0 5px; }
#head3 .in ul li.btn a { line-height: 1.1; }
#head3 .in ul li.btn a { width: 130px; text-decoration: none; display: -moz-inline-box; display: inline-block; padding: 7px 0; color: white; border-radius: 4px; background-color: #E11939; }
#head3 .in ul li.btn a:hover { opacity: 0.8; }
#head3 .in ul li.btn.biz a { background-color: #1B2B4B; }

@media (max-width: 1020px) {
#header_sp { display: block; }
#header_pc { display: none; }
}





#header_sp { display: none; position: sticky; height: 50px; padding: 0 50px; top: 0; font-size: 16px; font-weight: bold; line-height: 44px; text-align: center; background: white; overflow: hidden; border-bottom: 1px solid #ddd; z-index: 10000; }
#menu { display: none; }
#header_sp a { display: block; position: absolute; top: 0; left: 0; width: 48px; height: 50px; padding: 15px 15px; }
#header_sp a:before,
#header_sp a:after { content: ""; display: block; background: black; height: 2px; }
#header_sp a span { background: black; display: block; height: 2px; margin: 5px 0; }
#header_sp img { /*width: 100%; max-width: 190px; height: auto;*/ }
#header_sp div {  }
#header_sp div.btn { display: block; position: absolute; top: 5px; right: 10px; padding: 0; margin: 0; width: 70px; height: 50px; }
#header_sp a.order { background-color: #E11939; color: white; border-radius: 6px; font-size: 14px; padding: 0 8px; width: 100%; display: block; height: 40px; margin: 0; line-height: 40px; text-decoration: none; text-align: center; }
#header_sp a.order:before { display: none; }
#header_sp a.order:after { display: none; }
#header_sp a.contact { background-color: #FF8000; color: white; border-radius: 6px; font-size: 14px; padding: 0 8px; width: 100%; display: block; height: 40px; margin: 0; line-height: 40px; text-decoration: none; text-align: center; }
#header_sp a.contact:before { display: none; }
#header_sp a.contact:after { display: none; }

@media (max-width: 1020px) {
#header_sp { display: block; }
#menu { display: block; }
header { display: none; }
}



#page { padding: 134.667px 0 0; }
@media (max-width: 1020px) {
#page { padding: 0; }
}



section.mp_bc { border-bottom: 1px solid #ddd;  }
section.mp_bc .container { max-width: 1010px; padding: 10px 15px; }
section.mp_bc .container a { color: #aaa; text-decoration: none; }
section.mp_bc .container a:hover { color: #0a58ca; text-decoration: underline; }
section.mp_bc .container ol li { font-size: 13px; color: #aaa; }
section.mp_bc .container .breadcrumb { margin: 0; }
section.mp_bc .container .breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: .5rem;
  color: #aaa;
  content: "";
  content: "\f105"; font-family: FontAwesome;
  font-size: 13px;
}

@media screen and (max-width: 767px) {
section.mp_bc .container ol li { font-size: 12px; }
}



























.mp_column {  }
.mp_column .container-fluid { margin-inline-start: auto; margin-inline-end: auto; width: 100%; max-width: 700px; padding: 40px 25px 25px; }

.mp_column .article_header { padding: 0; }
.mp_column .article_header .category_eyebrow { margin: 0 0 2px; font-size: 14px; font-weight: 400; color: #aaa; }

.mp_column .article_header .create_date { margin: 0 0 3px; font-size: 12px; font-weight: 400; color: #aaa; }
.mp_column .article_header .category { margin: 0 0 15px; font-size: 14px; font-weight: 400; color: #aaa; }
.mp_column .article_header .category a { text-decoration: none; color: #aaa; }


.mp_column .article_header h1 { margin: 0 0 30px; font-size: 38px; font-weight: 900; line-height: 1.3; }
.mp_column .article_header .badge { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

@media screen and (max-width: 767px) {
.mp_column .article_header h1 { font-size: 28px; }
}
	
.mp_column .article_header li { background: white; padding: 8px 15px; display: block; font-size: 11px; border-radius: 100px; color: #333; border: 1px solid #ddd; }
.mp_column .article_header .date { margin: 0; font-weight: 13px; color: #ccc; }
.mp_column .article_header .caption { margin: 0 0 30px; font-family: HelveticaNeue-Light,Roboto -light,Helvetica,-apple-system,Yu Gothic UI,Segoe UI,sans-serif; font-size: 12px; letter-spacing: 0.08rem; color: #aaa; }

.figure { margin-bottom: 1.4em; display: flex!important; flex-direction: column; align-items: center; }
.figure.is-extended { margin: 0 0 30px; max-width: 900px; }
.figure.is-extended img { height: auto; max-width: 832px; width: inherit; }
@media (max-width: 899px) { .figure.is-extended img { max-width: 100%; } }

.rounded { border-radius: 4px!important; }

.mp_column .article_body {}

section .p { font-size: 15px; line-height: 1.6; }
section ul li { font-size: 15px; line-height: 1.6; }


.article_content .container-fluid { /*max-width: 1010px; padding: 0px 15px 100px;*/ margin-inline-start: auto; margin-inline-end: auto; width: 653px; }

.article_content .table_of_contents { padding: 30px; border: 1px solid #eee; border-radius: 4px; }
.article_content .table_of_contents p:first-of-type { font-size: 14px; font-weight: 900; }
.article_content .table_of_contents ul { list-style-type: none; }
.article_content .table_of_contents ul:not(ul ul) { padding-left: 0; }
.article_content .table_of_contents ul ul { padding-left: 1.5rem; }
.article_content .table_of_contents ul li { font-size: 14px; font-weight: 400; line-height: 1.7; }
.article_content .table_of_contents a { color: #222!important; text-decoration: none; }
.article_content .table_of_contents a span { padding-right: 10px; }
.article_content .table_of_contents a:hover { color: #0066CC!important; }

@media screen and (max-width: 767px) {
.article_content .table_of_contents { padding: 20px; border: none; border-radius: 10px; background: #f9f9f9; }
}

.article_content h2 { margin: 60px 0 30px; font-size: 32px; font-weight: 900; color: #07256C;  }
.article_content p { margin: 0 0 16px; font-size: 15px; font-weight: 400; line-height: 1.7; }
.article_content h3 { margin: 40px 0 20px; padding: 0 0 15px; font-size: 22px; font-weight: 900; color: #07256C; border-bottom: 1px solid #ddd; }
.article_content h4 { margin: 32px 0 15px; font-size: 16px; font-weight: 900; }
.article_content li { font-size: 15px; line-height: 1.7; }
.article_content img { border-radius: 4px; }

.article_content .table th { font-size: 15px; font-weight: 400; line-height: 1.7; padding: 10px; border: 1px solid #ddd; background: #eee; }
.article_content .table td { font-size: 15px; font-weight: 400; line-height: 1.7; padding: 10px; border: 1px solid #ddd; }




.device { margin: 20px 0 20px; background: #f1f5fc; border-radius: 4px; }
/*
.device a { display: flex; column-gap: 20px; padding: 20px; text-decoration: none; color: #07256C!important; }
*/
@media (max-width: 768px) {
.article_content h2 { margin: 40px 0 20px; font-size: 26px; }
.article_content h3 { margin: 30px 0 20px; font-size: 16px; }
.article_content p { font-size: 14px; line-height: 1.5; }
.article_content li { font-size: 14px; line-height: 1.5; }
.article_content .table th { font-size: 14px; line-height: 1.5; }
.article_content .table td { font-size: 14px; line-height: 1.5; }
}

.device { position: relative; /* 基準点にする */ display: flex; padding: 20px 20px 20px; column-gap: 20px; }

.device .img img { margin: 0 0 10px; width: 100%; max-width: 150px; height: auto; border-radius: 4px; }
.device .contents { font-size: 15px; font-weight: 500; line-height: 1; }
.device .contents .category { margin: 0 0 5px; font-size: 11px; font-weight: 400; line-height: 1.3; }
.device .contents .copy { margin: 0 0 8px; font-size: 13px; font-weight: 400; }
.device .contents .title { margin: 0 0 5px; font-size: 15px; font-weight: 700; line-height: 1.2; }
.device .contents .overview { font-size: 14px; font-weight: 400; line-height: 1.6; }
.device .stretched-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; font-size: 0; color: transparent; }
@media (max-width: 768px) {
.device { column-gap: 15px; }
.device a { flex-direction: column; }
.device .contents .category { display: none; }
.device .img img { width: 90px!important; height: auto; }
.device .contents .title { font-size: 14px; }
.device .contents .overview { font-size: 13px; line-height: 1.4; }
}





section.article_footer .article_latest {}
section.article_footer .article_latest ul li { display: flex; column-gap: 15px; border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px; }
section.article_footer .article_latest ul li:last-child { border-bottom: none; }
section.article_footer .article_latest ul li .wp-block-latest-posts__featured-image { }
section.article_footer .article_latest ul li img { max-width: 100px!important; border-radius: 4px; }
section.article_footer .article_latest ul li a { text-decoration: none; color: #333; }
section.article_footer .article_latest {}
@media (max-width: 768px) {
section.article_footer .article_latest ul li img { max-width: 80px!important; height: auto; }
}






.caution { margin: 25px 0 30px; background: #FFFCE5; background: #f5f5f7; background: none; padding: 20px; border-radius: 0px; border: 1px solid #ddd; }
.caution p:first-of-type { margin: 0 0 5px; }
.caution ul { margin-bottom: 0; }

.recommend { margin: 25px 0 30px; background: #EDFAFF; background: none; padding: 20px; border-radius: 4px; border: 1px solid #ddd; }
.recommend p:first-of-type { margin: 0 0 5px; }
.recommend ul { margin-bottom: 0; }

.br-pc {display: block; }
.br-sp {display: none; }
._pc_none { display: none; }
._sp_none { display: block; }
@media screen and (max-width:768px) {
.br-pc {display: none; }
.br-sp {display: block; }
._pc_none { display: block; }
._sp_none { display: none; }
}



.mp_column .article_footer { padding: 60px 0 100px;}
.mp_column .article_footer > .title { font-weight: 900; margin: 0 0 30px; }

.article_popular a { margin: 0 0 20px; padding-bottom: 20px; display: flex; column-gap: 15px; text-decoration: none; color: #222!important; border-bottom: 1px solid rgb(229, 229, 229); }
.article_popular a:hover { color: #0066CC!important; }
.article_popular .img img { max-width: 80px; border-radius: 4px; }
.article_popular .contents { margin-top: -5px; line-height: 1.4; font-weight: 500; }
.article_popular .contents .category { font-size: 12px; color: #aaa; }
.article_popular .contents .title { font-size: 14px; font-weight: 900; }
.article_popular .contents .read { font-size: 14px; }

.modal-backdrop.fade { opacity: 0.7; }
.modal-content { border-radius: 14px; color: black; }
.modal-header { padding: 20px 30px 20px; }
.modal .modal-body { line-height: 1.7; padding: 25px 30px; }
.modal h4 { text-align: center; font-weight: bold; font-size: 15px; }
.modal .modal-body p:last-of-type { margin-bottom: 2rem; }
.modal .btn-default { width: 100%; padding: 10px; color: #0066CC; border-color: #0066CC; border-radius: 100px; }
.modal .btn-default:hover { color: white; background-color: #0066CC; }
.modal .marker { background: linear-gradient(transparent 60%, #ff6 60%); }
.modal .label { background: none; border: 1px solid #333; border-radius: 2px; color: black; }
.modal .waku { margin-bottom: 20px; }
.modal .waku .waku_header { padding: 8px 15px 6px; text-align: center; background-color: #ddd; border-radius: 14px 14px 0 0; }
.modal .waku .waku_body { padding: 15px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 14px 14px; }
.modal .waku p:last-of-type { margin-bottom: 0; }
.modal .waku ul { margin-bottom: 0; padding-left: 20px; }











footer { padding: 60px 15px 60px; text-align: center; background-color: #eee; }
footer .mp_logo { margin-bottom: 20px; }
footer .company { margin-bottom: 3px; font-size: 14px; }
footer .address { margin-bottom: 30px; font-size: 14px; }
footer .mp_logo img { width: 260px; }
footer .bj_logo { margin-bottom: 40px; font-size: 14px; }
footer .bj_logo img { margin: 0 5px; }
footer .link { margin-bottom: 40px; padding: 0; list-style-type: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
footer .link li { display: inline-block; padding: 0 10px; }
footer .link a { text-decoration: none; color: #333; font-size: 14px; }
footer .link a:hover { color: #0d6efd; text-decoration: underline; }
footer .copyright { font-size: 0.8rem; letter-spacing: 0.1rem; }

@media screen and (max-width:768px) {
footer { padding: 50px 15px; }
footer .link { display: block; border-top: 1px solid #ccc; }
footer .link li { display: block; border-bottom: 1px solid #ccc; text-align: left; }
footer .link a { display: block; padding: 15px 0; }
}



#gotop { position: fixed; right: 30px; bottom: 50px; /*display: none;*/ z-index: 1000; }
#gotop a { display: block; background: url("/common3/images/ic_goto_top.png") no-repeat left top; background-size: 100%; width: 90px; height: 90px; text-indent: -99em; overflow: hidden; transition: all .25s ease; }
#gotop a:hover { opacity: 0.7; }
#gotop a { width: 60px; height: 60px; }


@media (max-width: 768px) {
#gotop { position: fixed; right: 20px; bottom: 20px; }
#gotop a { display: block; background: url("/common3/images/ic_goto_top.png") no-repeat left top; background-size: 100%; width: 60px; height: 60px; text-indent: -99em; overflow: hidden; transition: all .25s ease; }
}






/* アーカイブページ */
h1.wp-block-query-title { font-weight: 900; font-size: 38px; margin: 30px 0 40px; }
.wp-block-post-template { /* display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 30px;*/
 display: grid; grid-template-columns: repeat(4, 1fr); /* 4つの均等な列を作成 */ gap: 30px; /* 列と行の間のスペース */ }
/* スマホサイズでは2列にする例 */
@media (max-width: 768px) {
  .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wp-block-post-template li { flex-basis: 23%; height: 100%; padding-bottom: 20px; }
@media screen and (max-width: 767px) {
/*
.wp-block-post-template { flex-basis: auto; flex-direction: column; }
	*/
.wp-block-post-template li { flex-basis: 47%; height: 100%; }
}

.wp-block-post-template li img { border-radius: 4px; }
.wp-block-post-template li h2 { font-size: 16px; font-weight: 900; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 任意の行数を指定 */ }
.wp-block-post-template li p { margin: 0 0 10px; font-size: 14px; font-weight: 400; line-height: 1.5; }
.wp-block-post-template li a { font-size: 14px; font-weight: 400; text-decoration: none; color: #333; font-weight: 900; }






/* コラムページ */

.wp-block-post-template .wp-block-post-date { font-size: 13px; font-weight: 400; }

section.article_footer .article_latest ul li {
  display: grid;
  grid-template-columns: auto 1fr; /* 1列目:画像の幅, 2列目:残り全部 */
  grid-template-rows: auto auto;    /* 2行分の高さを自動で確保 */
  column-gap: 15px;
  align-items: start; /* 上揃えにすると、タイトルが複数行でもレイアウトが崩れにくい */

  /* 元のスタイル */
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
/* 1. 画像：1列目、1行目から3行目の前まで（つまり2行分）を占有 */
section.article_footer .article_latest ul li .wp-block-latest-posts__featured-image {
  grid-column: 1;
  grid-row: 1 / 4;
}

/* 2. タイトル：2列目、1行目に配置 */
section.article_footer .article_latest ul li a {
  grid-column: 2;
  grid-row: 1;
}

/* 3. 日付：2列目、2行目に配置 */
section.article_footer .article_latest ul li .wp-block-latest-posts__post-date {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0.5em;
}