/**/@charset "utf-8";
*,
::before,::after{box-sizing:border-box;border-style:solid;border-width:0;}
html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}
body{margin:0;}main{display:block;}
p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}dt{font-weight:bold;}dd{margin-left:0;}
hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit;}
pre{font-family:monospace,monospace;font-size:inherit;}
address{font-style:inherit;}a{background-color:transparent;text-decoration:none;color:inherit;}
abbr[title]{text-decoration:underline dotted;}b,strong{font-weight:bolder;}
code,kbd,samp{font-family:monospace,monospace;font-size:inherit;}
small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}
svg,img,embed,object,iframe{vertical-align: bottom;}
button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit;}
[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox;}[type="radio"]{-webkit-appearance:radio;appearance:radio;}
button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer;}
button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default;}:-moz-focusring{outline:auto;}
select:disabled{opacity:inherit;}option{padding:0;}fieldset{margin:0;padding:0;min-width:0;}legend{padding:0;}progress{vertical-align:baseline;}textarea{overflow:auto;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}
[type="search"]{outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance: button;font:inherit;}
label[for]{cursor:pointer;}details{display:block;}summary{display:list-item;}
[contenteditable]:focus{outline:auto;}table{border-color:inherit;border-collapse:collapse;}caption{text-align:left;}td,th{vertical-align:top;padding:0;}th{text-align:left;font-weight:bold;}


body{
margin:0;
/*font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;*/
/*font-family: -apple-system, "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Arial, sans-serif;*/
font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
font-weight:500;
font-size:16px;
line-height:1.75em;
color:#333;
}

html,body{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce) {
html,body{scroll-behavior:auto;}
}

/* メニューのスタイル */
.menu{
position:fixed;
top:0;
right:-100%;
width:80%;
height:100%;
overflow-y:auto;
background-color:rgba(70,70,70,.9);
color:#fff;
transition:right 0.3s ease;
padding:50px 15px 15px 15px;
box-sizing:border-box;
z-index:10;
}

.menu.open{
right:0;
}

.hamburger{
position:fixed;
/* ノッチ端末でも潰れないように（任意） */
top:calc(env(safe-area-inset-top, 0) + 16px);
right:calc(env(safe-area-inset-right, 0) + 16px);
width:44px;
height:44px;
cursor:pointer;
z-index:100;

/* ボタンのUAスタイルを無効化（iOSで枠や余白が出ないように） */
-webkit-appearance:none;
        appearance:none;
background:transparent;
border:0;
padding:0;
display:inline-block;
}

/* 3 本線 */
.hamburger span{
position:absolute;
left:8px;
right:8px;
height:3px;
background-color:#e60021;
border-radius:2px;
transition:transform.3s ease,opacity.3s ease;
/* iOS 描画安定化 */
transform-origin:center;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

/* 上中下の位置を固定 */
.hamburger span:nth-child(1){top:14px;}
.hamburger span:nth-child(2){top:20px;}
.hamburger span:nth-child(3){top:26px;}

/* 開いたときに「×」へ */
.hamburger.active span:nth-child(1){
transform:translateY(6px) rotate(45deg);
}
.hamburger.active span:nth-child(2){
opacity:0;
}
.hamburger.active span:nth-child(3){
transform:translateY(-6px) rotate(-45deg);
}

/* メニューリストのスタイル */
.menu ul{
list-style-type:none;
padding:0;
clear:both;
}

.menu li{
padding:18px 0;
border-bottom:1px solid #7b7a7a;
font-size:18px;
overflow:auto;
}

.submenu li{
padding:0;
float:left;
font-size:.75em;
width:38%;
background:#616161;
border:1px solid #b6b6b6;
text-align:center;
margin:8px 0 0 2.5%;
box-sizing:border-box;
border-radius:2px;
list-style:none;
}

.menu li a{
color:#fff;
text-decoration:none;
display:block;
padding:.6em .2em;
}

section a,aside a,.site_image a{
color:#e60021;
text-decoration:underline;
}

aside a{
color:#A3000E;
}

.site_image a{
color:#A3000E;
font-size:14px;
}

.red_txt{font-weight:bold;color:#EB0000;}

.slide{
font-size:14px;
}

.app_table{
border:solid 1px #ccc;
padding:8px;
background-color:#fbf9f9;
}

.app_table p{
margin:7px;
}

.app_icon{
display:flex;
align-items:center;
}

.app_icon img{
margin:5px;
}

.app_icon img:first-child{
margin-right:10px;
}

.app_link{
padding:5px;
}

.privacy-table{
width:calc(100% - 20px);
margin-top:24px;
}

.privacy-table th, .privacy-table td{
border:solid 1px #ccc;
padding:10px 10px;
white-space:nowrap;
font-size:16px;
line-height:1.7;
}

.privacy-table th{
background-color:#eee;
}

.author{
display:block;
margin-top:5px;
margin-bottom:5px;
}

.author-time{
float:left;
text-align:left;
width:auto;
}
.author-name{
float:right;
text-align:right;
font-size:14px;
width:auto;
padding:12px 0px 18px 0px;
}

@media all and (min-width:1150px){
.author-name{
font-size:16px;
padding:16px 0px 16px 0px;
}
}

.update{
text-decoration:none;
display:inline-block;
background-color:#595959;
font-size:16px;
color:#FFF;
padding:8px;
border-radius:4px;
position:relative;
margin-top:8px;
margin-bottom:8px;
}

figure{
margin-top:10px;
margin-left:calc(((100vw - 100%) / 2) * -1);
margin-right:calc(((100vw - 100%) / 2) * -1);
margin-bottom:10px;
color:#666;
position:relative; 
}

@media all and (min-width:1150px){
figure{
margin-right:0px;
margin-left:0px;
}
}

figcaption{
margin-left:10px;
}

hr{
border-top:1px solid #ccc;
margin-top:24px;
margin-bottom:24px;
}

.flex-1,.flex-4{
padding-left:30px;
padding-right:10px;
line-height:2.2;
}
@media all and (min-width:1150px){
.flex-4{
display:flex;
justify-content:space-between;
margin:0 auto;
width:750px;
padding-left:0px;
padding-right:0px;
}

.flex-1{
display:flex;
justify-content:flex-end;
padding-left:0px;
padding-right:0px;
}

.flex-1,.flex-4{
line-height:2;
}

}

.wrap li{
list-style-type:square;
color:grey;
}

.wrap li a{
color:#FFF;
}

.wrap ul{
padding-inline-start:30px;
margin-top:0;
margin-bottom:0px;
} 
@media all and (min-width:1150px) {
.wrap ul{
padding-inline-start:40px;
margin-bottom:0px;
} 
}

.columns-2{
column-count:2;
}

.wrap{
margin-right:18px;
page-break-inside:avoid;
break-inside:avoid;
}

.wrap:nth-child(n+2) ul{
margin-top:0px;
}

@media all and (min-width:1150px){
.wrap:nth-child(n+2) ul{
margin-top:29px;
}
}

.column{
margin-top:0px;
margin-bottom:0px;
}

.caption{
position:absolute;
bottom:0;
width:100%;
max-height:100%;
overflow:auto;
padding:2em .77em .7em;
color:#fff;
text-align:center;
font-size:.8em;
line-height:1.5em;
background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent);
box-sizing:border-box;
margin:0;
z-index:2;
}

.img-responsive{
max-width:100%;
height:auto;
border:1px solid #D1CFCF;
}

.img-fix{
max-width:100%;
height:auto;
}

#page_top{
position:fixed;
z-index:1000;
right:max(16px,env(safe-area-inset-right));
bottom:max(120px,env(safe-area-inset-bottom));
pointer-events: none; /* 非表示時にクリック不可 */
}

@media all and (min-width:1150px){
#page_top{
bottom:max(16px,env(safe-area-inset-bottom));
}
}

#page_top a.to-top{
display:inline-flex;
align-items:center;
justify-content:center;
width:60px;
height:60px;
color:#e60021;/* SVGはcurrentColorを拾う */
line-height:1;
opacity:0;/* 初期は見せない */
transform:translateY(8px);
transition:opacity .25s ease, transform .25s ease;
}

#page_top.is-visible{pointer-events:auto; }
#page_top.is-visible a.to-top{ opacity: .6; transform: translateY(0); }

@media(hover: hover){
#page_top.is-visible a.to-top:hover{opacity:1;}
}

#page_top a.to-top:focus-visible{
outline:2px solid currentColor;
outline-offset:2px;
opacity:1;
}
#page_top svg{display: block;}

.breadcrumbs{
overflow:hidden;
padding:10px 0 6px;
border-bottom:solid 1px #eee;
}

.breadcrumb{
display:flex;
flex-wrap:wrap;
}

.breadcrumb li{
display:flex;
align-items:center;
}
.breadcrumb a:hover{
color:#e60021;
}

.breadcrumb li:first-child::before{
width:1em;
height:1em;
margin-right:4px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
background-repeat:no-repeat;
content:'';
}

.breadcrumb li:not(:last-child)::after{
transform:rotate(45deg);
width:.3em;
height:.3em;
margin-left:10px;
margin-right:10px;
border-top:1px solid #333333;
border-right:1px solid #333333;
content:'';
}

#logo,.top-txt{
margin: 0 auto;
padding-left:10px;
padding-right:10px;
}
@media all and (min-width:1150px){
#logo,.top-txt{
width:1150px;
padding-left:0px;
padding-right:0px;
}	
}

.content{
padding-left:10px;
padding-right:10px;
}
@media all and (min-width:1150px){
.content{
margin:0 auto;
width:1150px;
padding-left:0px;
padding-right:0px;
}	
}

#logo{
padding-top:20px;
padding-bottom:15px;
}

h2{
padding-top:5px;
padding-bottom:5px;
margin-top:30px;
}

.recommend{
margin:0 auto;
border:2px solid #f06060;
border-radius:5px;
color:#333333;
}

.recommend div{
display:inline-flex;
align-items:center;
column-gap:4px;
position:relative;
top:-13px;
left:10px;
margin:0 7px;
padding:0 8px;
background:#fff;
color:#EB0000;
font-weight:600;
vertical-align:top;
}

.recommend div::before{
width:15px;
height:7.5px;
border-bottom:3px solid #EB0000;
border-left:3px solid #EB0000;
transform:rotate(-45deg) translate(2px, -2px);
content:'';
}

.recommend p{
margin:0;
padding:0 1.5em 1em;
}

h3 a:link{
color:#333;
text-decoration:underline;
}
h3 a:visited{
color:#333;
}

h3 a:hover{
color:#e60021;
text-decoration:underline;
}

h3 a:active{
color:#333;
}

.bold{
font-weight:bold;
}

.strong{
font-weight:bold;
background-color:#fcf8e3;
}

.strong_red{
color:#eb0000;
font-weight:bold;
}

.page-title{
border-bottom:5px solid #ccc;
position:relative;
font-size:20px;
line-height:1.5;
margin-bottom:10px;
margin-top:0px;/* <h2>用設定 */
padding:0px;
padding-bottom:0.3em;
}

@media all and (min-width:850px){
.page-title{
font-size:25px;
}
}

.page-title::after{
content:"";
display:block;
position:absolute;
width:100%;
height:7px;
top:100%;
background-image:linear-gradient(
-45deg,
#fff 25%,
#ccc 25%,
#ccc 50%,
#fff 50%,
#fff 75%,
#ccc 75%,
#ccc
);
background-size:8px 8px;
}

.top{
background-color:#e60021;
padding-top:5px;
padding-bottom:5px;
}

.top-txt{
display:none;
}
@media all and (min-width:1150px){
.top-txt{
display:block;
font-size:10px;
color:#EEEEEE;
}
}

.header-sp{
background:linear-gradient(#f0f0f0, #e1e1e1);
padding:5px;
border-top-width:1px;
border-top-color:#dadada;
}

section{
margin-top:15px;
margin-bottom:30px;
padding-right:0px;
}
@media all and (min-width:1150px){
section{
width:840px;
float:left;
padding-right:20px;
}
}

section p{
font-size:16px;
margin-top:24px;
margin-bottom:24px;
}

.title{
font-weight:bold;
font-size:18px;
}

span.marker{
background:linear-gradient(transparent 60%, #ffff66 60%);
font-weight:bold;
}

.report{
font-size:18px;
}

/*トップページの枠組み*/
.waku{
display:flex;
flex-wrap:wrap;
margin-top:20px;
margin-bottom:35px;
}

@media all and (min-width:850px){
.in_01{
width:260px;
box-sizing:border-box;
}
.in_02{
width:550px;
box-sizing:border-box;
padding-left:30px;
}

}

#relation{
margin-top:30px;
}

.relation_txt{
font-size:11px;
}
@media all and (min-width:850px){
.relation_txt{
font-size:12px;
}
}

.relation{
padding:10px;
border:1px dotted #3F3F3F;
}

.relation_01{
width:50%;
box-sizing:border-box;
}

.relation_02{
width: 50%;
box-sizing:border-box;
padding-left:20px;
}

.relation_02 p{
margin-top:5px;
margin-bottom:5px;
}

.relation_03 p{
margin-top:10px;
margin-bottom:0px;
}

@media all and (min-width:850px){
.relation_01{
width:250px;
}
.relation_02{
width: 540px;
padding-left:30px;
}
.relation_02 p{
margin-top:10px;
}

}

.info_txt{
font-size:13px;
margin-top:5px;
margin-bottom:10px;
}

.info_txt a:link,.link_txt a:link{
color: #333;
/*color: #0000ff;*/
/*text-decoration: none;*/
text-decoration: underline;
}
.info_txt a:visited,.link_txt a:visited {
color:#333;
}

.info_txt a:hover,.link_txt a:hover{
color:#e60021;
text-decoration:none;
}

.info_txt a:active,.link_txt a:active{
color:#333;
}

.info_right{
text-align:right;
}

.description{
font-size:14px;
margin-top:15px;
margin-bottom:15px;
}

.r-more{
border-radius:4px;
background-color:#e60021;
}

a.r-more{
color:#fff;
padding:0.5em;
text-decoration:none;
}

.table-contents{
background:#fbf9f9;
padding:10px;
margin:2px;
border:solid 0.5px #b4b1af;
box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);
word-break:break-all;
font-size:16px;
line-height:1.7;
}

@media all and (min-width:850px){
.table-contents{
padding:20px;
}
}

.table-contents ol{
list-style-type:decimal;
margin-block-start:0px;
margin-block-end:10px;
margin-inline-start:0px;
margin-inline-end:0px;
padding-inline-start:20px;
}
.table-contents ul{
list-style-type:square;
margin-block-start:0px;
margin-block-end:5px;
margin-inline-start:0px;
margin-inline-end:0px;
padding-inline-start:20px;
}
@media all and (min-width:850px){
.table-contents ol{
padding-inline-start:40px;
}
.table-contents ul{
padding-inline-start:40px;
}
}

.table-contents a:link/*,p a:link*/ {
color:#333;
text-decoration:none;
}
.table-contents a:visited/*,p a:visited*/ {
color:#333;
}
.table-contents a:hover{
/*.table-contents a:hover,p a:hover {*/
color:#e60021;
text-decoration:underline;
}

.toc{
display:flex;
justify-content:center;
align-items:center;
margin:0;
padding:5px 0;
font-weight:600;
}
@media all and (min-width:850px){
.toc {
justify-content:left;
}
}

.toc:before{
display:inline-block;
width:1em;
height:1em;
margin-right:5px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z' fill='%23333'%3E%3C/path%3E%3C/svg%3E");
content:'';
}

.coupon-contents li{
list-style-type:none;
margin-block-start:5px;
margin-block-end:20px;
margin-inline-start:0px;
margin-inline-end:5px;
padding-inline-start:10px;
padding-inline-end:5px;
}

.coupon-contents ul{
list-style-type:none;
margin-block-start:10px;
margin-block-end:15px;
margin-inline-start:0px;
margin-inline-end:0px;
background:#fffcf4;
border-radius:4px;
box-shadow:0px 0px 3px silver;
padding:0.5em 0.5em 0.5em 0.5em;
}
@media all and (min-width:850px){
.coupon-contents li{
padding-inline-end:5px;
}
.coupon-contents ul{
padding-inline-start:10px;
}
}

.coupon-contents ul{
line-height:1.5;
}

.normal ul{
line-height:1.2;
font-weight:normal;
}

.coupon-contents ul > li > ul{
font-weight:normal;
}

section h2{
border-top:1px none #444;
padding:0.5em;
text-align:left;
position:relative;
font-size:20px;
font-weight:bold;
}

section h2:after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
display:block;
height:3px;
background:linear-gradient(90deg, #ffb901 20.79688%, #fcb803 20.79688%, #02a4ef 41.92188%, #03a4eb 41.92188%, #7fba00 61.67188%, #80b800 61.67188%, #f25022 80.79688%);
}

.btn-icon{
text-decoration:none;
display:inline-block;
padding:.7em 1em;
border:none;
border-radius:5px;
background-color:#e60021;
color:#fff;
font-weight:600;
font-size:1em;
}

.btn-icon::after,.global_link-icon::after{
display:inline-block;
vertical-align:middle;
width:1.25em;
height:1.25em;
margin-left:8px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
content:'';
}

.btn-icon:hover{
background-color:#ee4d64;
}

.global_link-icon::after{
vertical-align:text-bottom;
margin-left:5px;
}

section h3{
font-size:18px;
font-weight:bold;
padding:0.6em;
margin-top:2em;
margin-bottom:1em;
border-left:8px solid #e60021;
background-color:#f1f1f1;
border-radius:6px;
color:#333;
}

.h3end{
border-left:6px solid #333;
background-color:#ededed;
color:#333;
}

.badge-end{
display:inline-block;
margin-right:.4em;
padding:.1em .4em;
font-size:.85em;
background:#595959;
color:#fff;
border-radius:.2em;
}


.index_h3{
font-size:22px;
line-height:1.4em;
background-color:#FFF;
padding:0px;
margin-top:15px;
margin-bottom:10px;
border-style:none;
}
@media all and (min-width:850px){
.index_h3{
margin-top:0px;
}
}

mark, .mark{
padding:0.2em;
background-color:#fcf8e3;
}

/*ページネーション*/
.pagination{
text-align:center;
}
.pagination a,
.pagination span{
display:inline-block;
margin:8px 0;
text-decoration:none;
border-radius:100%;
width:42px;
height:42px;
padding:14px 0;
box-sizing:border-box;
color:#333;
font-weight:bold;
line-height:1;
}
.pagination a:hover{
opacity:0.7;
}
.pagination .current{
background:#e60021;
color:#FFF;
}

@media screen and (max-width:767px){
.pagination a,
.pagination span{
margin:2px 0;
width:36px;
height:36px;
padding:10px 0;
}
}

/*右ナビ*/
aside{
display:none;
}
@media all and (min-width:1150px){
aside{
width:300px;
float:right;
display:block;
position:sticky;
top:60px;
margin-top:30px;
margin-bottom:10px;
}
}

.site_image{
background-color:#F1F1F1;
padding-top:20px;
padding-bottom:20px;
text-align:center;
}

.site_image_txt{
width:300px;
margin:0 auto;
text-align:left;
font-size:14px;
}

.twitter,aside p/*,img*/{
margin:10px;
}
.twitter{
height:1000px;
}

.entry-meta{margin-top:2rem;padding:1.25rem;border:1px solid #eee;border-radius:8px;background:#fafafa;}
.entry-meta__list{list-style:none;margin:0 0 .75rem;padding:0;display:grid;gap:.25rem;}
.entry-disclaimer{font-size:.9em;color:#666;margin:.5rem 0 0;}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;}

/*フッター*/
.container{
display:flex;
flex-direction:column;
min-height:100vh;
}

nav#global_under,nav#global_link{
background-color:#686868;
text-align:left;
text-decoration:none;
font-size:14px;
color:#eee;
padding-top:20px;
padding-bottom:20px;
}

nav#global_link{
background-color:#4e4e4e;
}

#footer-txt{
text-align:center;
background-color:#000;
color:#eee;
font-size:14px;
padding-top:15px;
padding-bottom:15px;
}

footer{
margin-top:auto;
}

.ad-box-01{
margin-top:20px;
margin-bottom:20px;
text-align : center;
height: 250px;
}

@media all and (min-width:1150px){
.ad-box-01{
margin-top:30px;
margin-bottom:30px;
text-align : center;
}
.ad-box-02{
margin-left:20px;
margin-right:20px;
}
}

.ad-box-03{
margin-top:40px;
margin-bottom:30px;
}

.aside-box{
margin-bottom:20px;
padding-top:20px;
padding-bottom:5px;
background-color:#F1F1F1;
}

.ad-box-under{
margin-top:20px;
margin-bottom:20px;
background-color: #F1F1F1;
}

details summary span{
font-size:14px;
font-weight:normal;
}

details{
--arrow-size:18px;
--anime-speed:0.3s;
}

details summary{
box-sizing:border-box;
position:relative;
display:block;
font-size:18px;
font-weight:700;
padding:1.5em calc(var(--arrow-size) + 3em) 1.5em 1.5em;
background:#fff;
border:1px solid #ff8193;
cursor:pointer;
}

details summary::-webkit-details-marker{
display:none;
}

details summary .ico{
position:absolute;
top:0;
right:1.5em;
bottom:0;
display:block;
width:var(--arrow-size);
height:calc(var(--arrow-size) * 0.6);
margin:auto;
background:#e60021;
clip-path:polygon(100% 13%, 50% 100%, 0 13%, 8% 0, 50% 73%, 92% 0);
transition:transform var(--anime-speed);
}

details[open] summary .ico{
transform:rotate(180deg);
}

details .inner{
position:relative;
padding:1.5em;
background:#fff1f3;
}

.carousel{
position:relative;
width:100%;
max-width:600px;
margin-top:0;
margin-right:auto;
margin-left:auto;
margin-bottom:30px;
overflow:hidden;
background:#fff;
height:auto;/* JSで現在スライドの高さを設定 */
transition:height 250ms ease;
touch-action:pan-y;/* 縦スクロールは許可＋横スワイプはJSで制御 */
}

.carousel .track{
display:flex;
will-change:transform;
transition:transform 400ms ease;
}

.carousel .slide{
min-width:100%;
/* 高さはコンテンツ（img + p）に任せる */
background:#fff;
color:#111;
display:block;
}

.carousel .slide img{
display:block;
width:100%;
height:auto;/* 画像のアスペクトに追従 */
}

.carousel .slide p{
margin:0;
padding:8px 12px;
font-size:14px;
line-height:1.4;
background:#fff;
}

/* 前後ナビ */
.carousel .nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px; height: 44px;
border:none; border-radius: 9999px;
background:rgba(0,0,0,.5);
color:#fff; font-size: 24px; line-height: 44px;
text-align:center;cursor:pointer;user-select:none;
z-index:10;
}
.carousel .nav:hover{background:rgba(0,0,0,.7);}
.carousel .nav:focus{outline:2px solid #fff;outline-offset:2px;}
.carousel .nav.prev{left:8px;}
.carousel .nav.next{right:8px;}

/* スワイプ安定化：初期タッチが img でも横スワイプを自前で扱えるようにする */
.carousel,
.carousel .track,
.carousel .slide,
.carousel .slide img{
touch-action: pan-y; /* 縦スクロールはブラウザ、横はJSで制御 */
}

/* 不要なドラッグ／長押しメニューを抑止（任意だがAndroidで効きます） */
.carousel .slide,
.carousel .slide *{
-webkit-user-drag:none;
-webkit-touch-callout:none;
user-select: none;
}


@media (max-width: 420px){
.carousel.nav{
width:38px;height:38px;font-size:20px;line-height:38px;
}
.carousel.slide p{padding:6px 10px;font-size:13px;}
}

@media all and (min-width:1150px) {
.carousel{
width:500px;
margin:0;
}
}