/*
Theme Name:atoyomi THEMA
*/

/*===========================
  reset Css
===========================*/
html{-webkit-text-size-adjust:100%;box-sizing:border-box;-moz-tab-size:4;tab-size:4;word-break:normal}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}hr{color:inherit;height:0;overflow:visible}details,main{display:block}summary{display:list-item}small{font-size:80%}[hidden]{display:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}a{background-color:transparent}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}pre{font-size:1em}b,strong{font-weight:bolder}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}iframe{border-style:none}input{border-radius:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}button,select{text-transform:none}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,input,select,textarea{background-color:transparent;}a:focus,button:focus,input:focus,select:focus,textarea:focus{outline-width:0}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;color:inherit;font:inherit}[disabled]{cursor:default}img{border-style:none}progress{vertical-align:baseline}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true]{cursor:default}
ul,ol{ list-style:none; }

/*===========================
  base.css
===========================*/
:root{
	--main-color:#0BFEB1;
    --second-color:#633FFF;
    --spotify-color:#00D34D;
    --letter-color:#3B74F4;
    --line-color:#EFEFEF;
    --link-color:#633FFF;
    --font-color:#000;
    --en-font:"Dela Gothic One", 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3','游ゴシック体', 'Yu Gothic', YuGothic, Meiryo, メイリオ, sans-serif;
}

body{
	width:100%;
    padding:60px 0 0;
    font:15px 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3','游ゴシック体', 'Yu Gothic', YuGothic, Meiryo, メイリオ, sans-serif;
    -webkit-font-smoothing:antialiased;
	font-weight:400;
    background:#E3E3E3;
    color:var(--font-color);
	overflow-x:hidden;
}
body.indexPage{ padding-top:0; }
body.noscroll{ overflow:hidden; }

a{ text-decoration:none; color:var(--font-color); }
img{ width:100%; height:auto; vertical-align:bottom; }
p{ line-height:1.6; }

div,p,span,a,ul,li,dl,dt,dd{ box-sizing:border-box; }

@media screen and (min-width:960px){
    .spOnly{ display:none; }
}
@media screen and (max-width:959px){
    .pcOnly{ display:none; }
}

/*=================================
  common
===================================*/
#container{ width:100%; }

#topPage{ display:flex; flex-wrap:wrap; }
#topPage .topKv{ width:420px; height:100vh; background:#0BFEB1; position:sticky; top:0; z-index:1; }
#topPage .topMain{ width:calc(100% - 420px);  position:relative; }
#topPage .topMain::before{ width:174px; aspect-ratio:500 / 307; content:""; background:url("img/bg_ato.svg") no-repeat 0 0 / 100% auto; position:fixed; top:100px; left:380px; }
#topPage .topMain::after{ width:174px; aspect-ratio:500 / 307; content:""; background:url("img/bg_yomi.svg") no-repeat 0 0 / 100% auto; position:fixed; bottom:100px; right:-40px; }

#topPage .topMain main{ padding:73px 30px 119px; position:relative; }

.inner{ max-width:1105px; margin:0 auto; padding:0 30px; }

.simplePage{ padding:15px 0 100px; }

@media screen and (max-width:959px){
    #topPage .topKv{ width:100%; height:auto; position:static; }
    #topPage .topMain main{ padding:48px 4% 100px; }
    #topPage .topMain main::before{ width:100%; height:19px; content:""; background:url("img/bg_nami_green.svg") repeat-x 0 0 / auto 100%; transform:rotate(180deg); position:absolute; top:-1px; left:0; z-index:3; }
    #topPage .topMain::before{ left:-40px; }
    #topPage .topMain{ width:100%; }
    
    .inner{ padding:0 4%; }
}

/*  header
===================================*/
#siteHeader{ width:100%; min-height:60px; display:flex; align-items:center; justify-content:center; background:var(--main-color); position:fixed; top:0; left:0; z-index:10; }
#siteHeader .logo{ width:34px; }
#siteHeader .searchBtn{ position:absolute; top:0; right:10px; }
#siteHeader .searchBtn a{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; }
#siteHeader .searchBtn a img{ width:18px; }
#siteHeader .searchInput{ position:absolute; top:12px; right:14px; }
#siteHeader .searchInput input[type = "text"]{ width:200px; padding:6px 40px 4px 15px; background:#fff; border:#000 1px solid; border-radius:50px; }
#siteHeader .searchInput input[type = "submit"]{ width:35px; height:35px; display:block; background:url("img/ico_lupe.svg") no-repeat 0 center / 18px auto; border:none; position:absolute; top:0; right:0; }

#siteHeader .searchBtn.close{ display:none; }
#siteHeader .searchInput{ display:none; }
#siteHeader .searchInput.open{ display:block; }

/*-- pcMenuBtn ボタン --*/
#siteHeader .hbBtn{ width:60px; height:60px; position:absolute; top:0; left:10px; z-index:30; }
#siteHeader .hbBtn p{ width:60px; height:60px; display:block; position:relative; }
#siteHeader .hbBtn p span,
#siteHeader .hbBtn p span:after,
#siteHeader .hbBtn p span:before{ width:26px; height:1px; display:block; content:""; background:var(--font-color); transition: .2s; position:absolute; top:50%; left:calc(50% - 13px); }
#siteHeader .hbBtn p span:before{ margin-top:-8px; }
#siteHeader .hbBtn p span:after{ margin-top:7px; }
#siteHeader .hbBtn.close p span{ height:0; }
#siteHeader .hbBtn.close p span:after{ width:26px; margin-top:0; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
#siteHeader .hbBtn.close p span:before{ width:26px; margin-top:0; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); }

.indexPage #siteHeader{ display:none; }

/*-- メニュー表示 --*/
#siteHeader #hbMenu{ visibility:hidden; opacity:0; transition:all 0.3s; } /* 非表示 */
#siteHeader #hbMenu{ width:100%; height:calc(100vh - 60px); background:#E3E3E3; overflow-y:auto; position:fixed; top:60px; left:0; z-index:20; }
#siteHeader #hbMenu.open{ visibility:visible; opacity:1; }
#siteHeader #hbMenu .hbMenuCon{ max-width:260px; margin:0 auto; padding:48px 0 100px; }
#siteHeader #hbMenu ul.gnav{ margin:0 0 40px; padding:0 0 40px; text-align:center; border-bottom:#707070 1px solid; font-size:16px; font-weight:700; }
#siteHeader #hbMenu ul.gnav li{ margin:0 0 10px; }
#siteHeader #hbMenu .title{ text-align:center; font-size:14px; font-weight:700; }
#siteHeader #hbMenu ul.whiteBtnList li a{ min-height:60px; }
#siteHeader #hbMenu ul.whiteBtnList li a span{ font-size:16px; }
#siteHeader #hbMenu ul.snsLink{ margin:40px 0 0; }

@media screen and (max-width:959px){
    #siteHeader .searchInput{ width:100%; background:var(--main-color); padding:10px 4% 15px; position:absolute; top:60px; left:0; }
    #siteHeader .searchInput input[type = "text"]{ width:100%; height:40px; padding:6px 45px 4px 20px; }
    #siteHeader .searchInput input[type = "submit"]{ top:12px; right:4%; }
    
    .indexPage #siteHeader{ display:flex; visibility:hidden; opacity:0; transition:all 0.3s; }
    .indexPage #siteHeader.open{ visibility:visible; opacity:1; }
}

/*  footer
===================================*/
#siteFooter{ padding:66px 0 0; background:var(--second-color); position:relative; z-index:2; }
#siteFooter .inner{ max-width:100%; padding:0; }
#siteFooter::before{ width:100%; height:19px; content:""; background:url("img/bg_nami_blue.svg") repeat-x 0 0 / auto 100%; position:absolute; top:-19px; left:0; }
#siteFooter .linkArea{ max-width:260px; margin:0 auto; padding:0 0 76px; }
#siteFooter .linkArea .heading1{ color:#fff; }
#siteFooter .linkArea .tit{ margin:43px 0 0; text-align:center; font-size:14px; font-weight:600; color:#fff; }
#siteFooter .linkArea ul.whiteBtnList li a{ min-height:60px; }
#siteFooter .infoArea{ padding:60px 0; background:#fff; }
#siteFooter .infoArea ul.infoLink{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 30px; margin:40px 0 0; font-size:14px; }
#siteFooter .infoArea .copy{ margin:44px 0 0; text-align:center; font-size:12px; color:#868686; }

/*=================================
  parts
===================================*/
/*  title
===================================*/
.heading1{ text-align:center; font-size:28px; font-family:var(--en-font); font-weight:400; color:var(--second-color); }
.pageTitle{ text-align:center; font-size:28px; font-weight:400; font-family:var(--en-font); }

/*  btn
===================================*/
.greenBtn,
.blueBtn{ width:100%; display:block; padding:17px 10px; text-align:center; background:var(--spotify-color); border:var(--spotify-color) 1px solid; border-radius:20px; font-size:15px; font-weight:600; line-height:1; color:#fff; }

.blueBtn{ background-color:var(--letter-color); border-color:var(--letter-color); }

@media screen and (min-width:960px){
    .greenBtn,
    .blueBtn{ transition:all 0.2s; }
	.greenBtn:hover{ background:#fff; color:var(--spotify-color); }
	.blueBtn:hover{ background:#fff; color:var(--letter-color); }
}

/*  txt
===================================*/
.noHitTxt{ margin:30px 0 100px; text-align:center; }
.taCenter{ text-align:center; }

/*  articleMoreBtn
===================================*/
.articleMoreBtn{ width:120px; margin:48px auto 0; text-decoration:underline; font-size:18px; font-weight:700; color:var(--second-color); }
.articleMoreBtn span.arrow{ padding:0 0 0 10px; position:relative; }
.articleMoreBtn span.arrow::after{ width:0; height:0; content:""; border-style:solid; border-right:5px solid transparent; border-left:5px solid transparent; border-top:6px solid var(--second-color); border-bottom:0; position:absolute; top:calc(50% - 3px); right:-15px; }

/*  loadingMove
===================================*/
.loadingMove{ width:40px; height:8px; display:block; margin:0 auto; background-position:0 0, left; background-repeat:no-repeat, repeat-x; background-size:8px 100%, 16px 100%; background-image:radial-gradient(4px 4px at 4px 4px, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 99%, transparent),radial-gradient(4px 4px at 4px 4px, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 99%, transparent); animation:loadingMove 1.5s linear infinite; }

@-webkit-keyframes loadingMove{
  0%{ background-position: 0 0, left; }
  32%{ background-position: 0 0, left; }
  33%{ background-position: 50% 0, left; }
  66%{ background-position: 50% 0, left; }
  67%{ background-position: 100% 0, left; }
  100%{ background-position: 100% 0, left; }
}


/*=================================
  module
===================================*/
/*  topSearchArea
===================================*/
.topSearchArea{ display:flex; align-items:center; gap:0 10px; position:fixed; top:20px; right:20px; z-index:3; }
.topSearchArea input[type = "text"]{ width:200px; padding:6px 40px 4px 15px; background:#fff; border:#000 1px solid; border-radius:50px; }
/*.topSearchArea input[type = "submit"]{ width:35px; height:35px; display:block; background:url("img/ico_lupe.svg") no-repeat 0 center / 18px auto; border:none; position:absolute; top:0; right:0; }*/
.topSearchArea input[type = "submit"]{ display:none; }
.topSearchArea .btn{ width:48px; height:48px; background:url("img/ico_lupe.svg") no-repeat center center / 14px auto #fff; border:#707070 1px solid; border-radius:50%; cursor:pointer; }

.topSearchArea form{ visibility:hidden; opacity:0; transition:all 0.3s; }
.topSearchArea form.open{ visibility:visible; opacity:1; }

@media screen and (max-width:959px){
    .topSearchArea{ display:none; }
}

/*  topKv
===================================*/
.topKv .title{ width:100%; max-width:280px; margin:40px auto 0; aspect-ratio:412 / 220; background:url("img/top_kv.svg") no-repeat 0 0 / 100% auto; text-indent:-9999px; }

.buzzImg{ width:100%; height:87px; display:flex; overflow:hidden; position:relative; }
.buzzImg img{ width:auto; height:100%; will-change:transform; }
.buzzImg img:first-child {
    animation:loop 30s -15s linear infinite;
    backface-visibility:hidden;
    will-change:transform;
}
.buzzImg img + img {
    animation:loop2 30s linear infinite;
}
@keyframes loop{
    0%{ transform: translateX(100%); }
    100%{ transform: translateX(-100%); }
}
@-webkit-keyframes loop2{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-200%); }
}

.topKv .topKvCon{ margin:27px 0 0; padding:0 50px 50px; }
.topKv .lead{ font-size:14px; font-weight:600; line-height:2; }
@media screen and (max-width:959px){
    .topKv .title{ max-width:360px; aspect-ratio:480 / 250; background-image:url("img/top_kv_sp.svg"); }
    .topKv .topKvCon{ margin:30px 0 0; padding:0 8% 50px; }
    .topKv .lead{ font-size:16px; }
}

/*  whiteBtnList
===================================*/
ul.whiteBtnList{ margin:27px 0 0; }
ul.whiteBtnList li{ margin:10px 0 0; position:relative; }
ul.whiteBtnList li.podcast::after,
ul.whiteBtnList li.theletter::after{ width:0; height: 0; content:""; border-style: solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--spotify-color); border-right: 0; position:absolute; top:calc(50% - 5px); right:19px; }
ul.whiteBtnList li.theletter::after{ border-left-color:var(--letter-color); }
ul.whiteBtnList li a{ min-height:56px; display:flex; align-items:center; justify-content:center; text-align:center; background:#fff; border:#707070 1px solid; border-radius:24px; font-size:14px; font-weight:700; }
ul.whiteBtnList li a span{ margin:0 5px 5px 0; font-family:var(--en-font); font-weight:400; font-size:18px; }
ul.whiteBtnList li.spotify span,
ul.whiteBtnList li.apPodcast span,
ul.whiteBtnList li.youtube span,
ul.whiteBtnList li.letter span{ font-size:16px; }
ul.whiteBtnList li a img{ width:26px; margin:0 6px 0 0; vertical-align:-8px; }
ul.whiteBtnList li.youtube a img{ width:24px; vertical-align:-2px; }

/*  streamList
===================================*/
ul.streamList{ display:flex; align-items:center; justify-content:center; gap:0 30px; margin:61px 0 0; }
ul.streamList li img{ width:30px; }

/*  autherImg
===================================*/
ul.autherImg{ width:100%; display:flex; align-items:baseline; justify-content:center; gap:0 8px; }
ul.autherImg li img{ width:auto; height:40px; }

/*  articleList
===================================*/
ul.articleList{ max-width:700px; margin:0 auto; position:relative; z-index:2; }
ul.articleList > li{ margin:70px 0 0; padding:30px 44px 50px; background:#fff; border:#707070 1px solid; border-radius:60px; position:relative; }
ul.articleList > li ul.autherImg{ position:absolute; top:-17px; left:0; }
ul.articleList > li .number{ text-align:center; font-size:16px; font-family:var(--en-font); color:#A3A3A3; }
ul.articleList > li .title{ margin:20px 0 0; font-size:22px; font-weight:700; line-height:1.6; }
ul.articleList > li .txt{ margin:20px 0 0; }
ul.articleList > li .quote{ margin:10px 0 0; }
ul.articleList > li .quote .tit{ margin:0 0 5px; }
ul.articleList > li .quote ul li{ margin:0 0 5px; }
ul.articleList > li .quote ul li a{ color:var(--link-color); }

ul.articleList > li .linkArea{ max-width:325px; display:flex; margin:25px auto 0; }
ul.articleList > li .linkArea figure{ width:120px; }
ul.articleList > li .linkArea figure img{ aspect-ratio:1 / 1; object-fit:cover; border-radius:10px; }
ul.articleList > li .linkArea .txtArea{ width:calc(100% - 120px); padding:0 0 0 19px; }
ul.articleList > li .linkArea .txtArea ul{ margin:20px 0 0; }
ul.articleList > li .linkArea .txtArea ul li{ margin:10px 0 0 8px; }
ul.articleList > li .linkArea .txtArea ul li a{ font-size:14px; color:var(--link-color); }

@media screen and (min-width:960px) {
    ul.articleList > li .quote ul li a:link,
    ul.articleList > li .quote ul li a:visited{ text-decoration:underline; }
    ul.articleList > li .quote ul li a:hover,
    ul.articleList > li .quote ul li a:active{ text-decoration:none; }
    
    ul.articleList > li .linkArea .txtArea ul li a:link,
    ul.articleList > li .linkArea .txtArea ul li a:visited{ text-decoration:none; }
    ul.articleList > li .linkArea .txtArea ul li a:hover,
    ul.articleList > li .linkArea .txtArea ul li a:active{ text-decoration:underline; }
}
@media screen and (max-width:959px){
    ul.articleList{ margin:54px auto 0; }
    ul.articleList > li{ margin:40px 0 0; padding:30px 30px 39px; }
    ul.articleList > li .linkArea figure{ width:100px; }
    ul.articleList > li .linkArea .txtArea{ width:calc(100% - 100px); }
    ul.articleList > li .quote ul li a{ text-decoration:underline; }
    ul.articleList > li .linkArea .txtArea ul{ margin:15px 0 0; }
}

/*  cateLinkArea
===================================*/
@media screen and (max-width:959px){
    .cateLinkArea{ position:relative; z-index:2; }
    .cateLinkArea .tit1{ margin:40px 0 12px; text-align:center; font-size:14px; }
    .cateLinkArea .tit2{ margin:40px 0 24px; text-align:center; font-size:18px; font-weight:700; }
    ul.whiteBtnList{ max-width:400px; margin:0 auto; }
    ul.whiteBtnList li a{ min-height:80px; }
    ul.whiteBtnList li a{ font-size:16px; }
    ul.whiteBtnList li a span{ font-size:20px; }
}

/*  autherArea
===================================*/
.autherArea{ width:100%; padding:70px 0 95px; background:#FFFFDC; position:relative; z-index:1; }
.autherArea::before{ width:100%; height:19px; content:""; background:url("img/bg_nami_yellow.svg") repeat-x 0 0 / auto 100%; position:absolute; top:-19px; left:0; }
.autherArea ul{ max-width:300px; margin:0 auto; }
.autherArea ul li{ margin:40px 0 0; }
.autherArea ul li figure{ width:47px; margin:0 auto; }
.autherArea ul li:nth-child(2) figure{ width:49px; }
.autherArea ul li .name{ margin:10px 0 0; text-align:center; font-size:18px; font-family:var(--en-font);  }
.autherArea ul li .txt{ margin:15px 0 0; font-size:14px; }

@media screen and (max-width:959px){
    .autherArea{ padding:70px 0 80px; }
}

/*  paging
===================================*/
/*.paging{ max-width:500px; display:flex; align-items:center; justify-content:center; gap:0 5px; margin:70px auto 100px; padding:0 50px; position:relative; }
.paging .page-numbers{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-family:var(--en-font);  }
.paging .page-numbers.current{ background:var(--second-color); color:#fff; }
.paging .page-numbers.prev,
.paging .page-numbers.next{ position:absolute; top:0; }
.paging .page-numbers.prev{ left:0; }
.paging .page-numbers.next{ right:0; }

@media screen and (min-width:960px) {
    .paging .page-numbers{ transition:all 0.2s; }
	.paging .page-numbers:hover{ background:var(--second-color); color:#fff; }
    .paging .page-numbers.prev:hover,
    .paging .page-numbers.next:hover{ background:none; color:var(--second-color); }
}*/

/*  listPage
===================================*/
.listPage{ padding:13px 30px 73px; }
.listPage ul.articleList{ max-width:1105px; display:flex; flex-wrap:wrap; gap:35px 25px; margin:80px auto 0; }
.listPage ul.articleList > li{ width:calc((100% - 25px) / 2); margin:0; }

@media screen and (max-width:959px){
    .listPage{ padding:40px 4% 73px; }
    .listPage ul.articleList{ max-width:540px; gap:40px 0; margin:60px auto 0; }
    .listPage ul.articleList > li{ width:100%; margin:0; }
    
    .searchPage .listPage{ padding-top:80px; }
}

/*  notFoundBox
===================================*/
.notFoundBox{ margin:30px 0 0; }
.notFoundBox .link{ margin:30px 0 0; }
.notFoundBox .link a{ max-width:250px; min-height:56px; display:flex; align-items:center; justify-content:center; margin:0 auto; text-align:center; background:#fff; border:#707070 1px solid; border-radius:24px; font-size:14px; font-weight:700; }

/*  snsLink
===================================*/
ul.snsLink{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 30px; font-size:14px; }
ul.snsLink li{ width:26px; }
ul.snsLink li:nth-child(2){ width:24px; }