/*reset*/ /*******************************************************************/ html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[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}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;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,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}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;font:inherit}[type=search]{-webkit-appearance:none;}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i{font-style:normal} a { color: #222; transition: all .2s ease-out; text-decoration: none;} a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;} *:focus { outline: none;} @media screen and (min-width: 768px){ a { transition: opacity .2s ease-out, background .2s ease-out;} a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}} @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?u86o4s'); src: url('fonts/icomoon.eot?u86o4s#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?u86o4s') format('truetype'), url('fonts/icomoon.woff?u86o4s') format('woff'), url('fonts/icomoon.svg?u86o4s#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block;} [class^="icon-"], [class*=" icon-"], .menu > li ul a::after, .menu > li ul a::before,.pagenav a::before, .pagenav a::after,.accordion dt::after, .button[data-style*="square"]::after, .accordion[data-style*="line"] dt::before, #body ul li::before, .widget .selectbox::after, .widget_categories li::before{ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .icon-arrow_sp:before{content:'\e900'} .icon-back:before{content:'\e901'} .icon-check:before{content:'\e902'} .icon-cross:before{content:'\e903'} .icon-forward:before{content:'\e904'} .icon-hatena:before{content:'\e905'} .icon-light:before{content:'\e906'} .icon-line:before{content:'\e907'} .icon-youtube:before{content:'\16a'} .icon-minus:before{content:'\e908'} .icon-pen:before{content:'\e909'} .icon-plus:before{content:'\e90a'} .icon-pocket:before{content:'\e90b'} .icon-question:before{content:'\e90c'} .icon-search:before{content:'\e90d'} .icon-surprised:before{content:'\e90e'} .icon-clock:before{content:'\e90f'} .icon-home:before{content:'\e910'} .icon-blank:before{content:"\e911"} .icon-facebook:before{content:'\ea90'} .icon-instagram:before{content:'\ea92'} .icon-twitter:before{content:'\ea96'} .icon-pinterest:before{content:'\ead1'} ::-webkit-input-placeholder { font-size: 1.4rem; font-weight: 700; color: #222;} ::-moz-placeholder { font-size: 1.4rem; font-weight: 700; color: #222;} :-ms-input-placeholder { font-size: 1.4rem; font-weight: 700; color: #222;} /*LAYOUT*/ /*******************************************************************/ html { font-size: 11px;}/* font-sizeのrem設定に関連 h1~h6 */ body { /*font-family: 'Century Gothic', YuGothic, 'Yu Gothic medium', 'Hiragino Sans', Meiryo, 'sans-serif';*/ font-size: 1.4rem; font-weight: 500; color: #222;} #container { width: 100%; overflow: hidden;} /*HEADER*/ /*******************************************************************/ #header { position: fixed; top: 0; left: 0; width: 100%; background: #FFF; z-index: 999;} .in { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: calc(1160px + 40px); margin: 0 auto; padding: 0 20px;} #global,#global_main{ position: relative; display: flex; flex-wrap: wrap;align-items: center; width: 100%;} #global .sns a, #global .searchbtn { display: flex; justify-content: center; align-items: center; width: 37px; height: 47px; border-left: 1px solid #E5E5E5;} #global .searchbtn {border-right: 1px solid #E5E5E5;} #header::after, #global::after { content: ''; display: block; position: absolute; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 1px; background: #E5E5E5;} .logo{text-overflow: ellipsis; white-space: nowrap;} #catchcopy {text-overflow: ellipsis; white-space: nowrap;overflow: hidden;} #footer .logo {overflow: unset;white-space: unset;} .search { position: relative;} .search form { pointer-events: none; opacity: 0; position: absolute; right: 0; top: 90%; display: flex; padding: 16px; background: #F4F4F4; border: 1px solid #D3D3D3; z-index: 9999; transition: .2s ease-out;} .search.open form { pointer-events: auto; opacity: 1; top: calc(100% + 8px);} .search form input[type="search"] { width: 240px; font-size: 16px;} .searchbtn { position: relative; cursor: pointer;} /*ASIDE*/ /*******************************************************************/ .widget { margin-bottom: 30px;} .widget .list li { display: flex; align-items: flex-start; margin-bottom: 20px; margin-left: 0px; padding-bottom: 20px; border-bottom: 1px solid #E5E5E5;width:100%;} .widget .list ul.cat>li { margin-bottom: 0px; padding-bottom: 0px; } .widget .list ul.post-categories>li { margin-bottom: 0px; padding-bottom: 0px !important; } .widget .list li:last-child { margin-bottom: 0; border-bottom: none;} .widget .list li figure { width: 100px; padding-top: 100px;} .widget .list li div { flex: 1; margin-left: 16px;} .widget .list li time,.widget .list li .wpp_li_date{ display: block; margin: 4px 0; } .widget .list li p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-weight: 700;} #contents .widget .list.highlighted div{margin-left: 0px;} #contents .widget .list.highlighted time{margin-bottom: 0px;} .screen-reader-text { display: none;} .widget_search form { display: flex;} .widget_search input[type="search"] { flex: 1; height: 46px; padding: 8px; background: #F4F4F4; font-size: 16px;} .widget_search button { width: 46px; height: 46px; padding: 16px; background: #222; color: #FFF;} .widget_banner figure { text-align: center;} .widget_banner figure:not(:last-child) { margin-bottom: 16px;} .widget_profile .profilebg img { width: 100%;} .widget_profile .profile figure { width: 100px; padding-top: 100px; margin: -50px auto 0; border-radius: 50%;} .widget_profile .profile figure img { border: 4px solid #FFF; border-radius: 50%;} .widget_profile .profile h3 { margin: 16px 0; text-align: center; font-size: 1.6rem;} .widget_profile .sns { margin-top: 16px;} .widget .selectbox { position: relative;} .widget .selectbox::after { content: '\e904'; position: absolute; top: calc(50% - 0.5em); right: 16px; font-size: 1rem; pointer-events: none;} .widget select { width: 100%; padding: 16px 32px 16px 16px; background: #F4F4F4; font-weight: 700; font-size: 16px;} .widget_categories ul:not(.children) > li { position: relative; margin-bottom: 16px; padding: 0 0 16px 16px; border-bottom: 1px solid #E5E5E5; font-weight: 700;} .widget_categories ul:not(.children) > li::before { content: '\e900'; position: absolute; /*top: 1em; */ top: calc(50% - 1.2rem - 1px); left: 0; font-size: 0.6rem; color: #222; } .widget_categories ul:not(.children) > li span { display: inline-block; margin-left: 8px; padding: 2px 4px; background: #F4F4F4; border-radius: 5px; font-size: 1.1rem;} .widget_categories ul.children { margin: 16px 0 0 16px;} .widget_tag_cloud a { display: inline-block; margin: 0 8px 8px 0; padding: 4px 8px; background: #F4F4F4; border-radius: 5px; font-size: 1.4rem!important;} .widget_map p { margin-top: 8px; text-align: right; font-weight: 700;} .widget_map p span { display: inline-block; vertical-align: baseline; font-size: 1rem;} .widget_video .video img { width: 100%;} .widget_onepost .list li{ display:block !important; } /*FOOTER*/ /*******************************************************************/ #footer .in { align-items: flex-start; padding-top: 80px; padding-bottom: 80px;} #footer aside.in { padding-bottom: 30px;padding-top: 30px;} #footer aside.in::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #F4F4F4; z-index: -1;} #footer .in .col { width: 30%;} #footer .in address { width: 100%; margin-top: 30px; text-align: right; font-size: 1rem; font-weight: 700; font-style: normal;} #footer div.in .logo{white-space:normal;} .infomation { display: flex; flex-wrap: wrap; align-items: center;} .infomation .sns { margin-left: 80px;} .infomation .sns li { margin: 0 10px;} .infomation .searchbtn { margin: 0 10px;} .infomation .footermenu { width: 100%;} .infomation .footermenu li { display: inline-flex; margin: 8px 24px 8px 0; font-weight: 700;position: relative;} #footer .in[data-layout="center"] { display: block; text-align: center;} #footer .in[data-layout="center"] .infomation { justify-content: center;} #footer .in[data-layout="center"] .infomation .logo { width: 100%; margin-bottom: 6px;} #footer .in[data-layout="center"] .infomation .sns { margin: 0;} #footer .in[data-layout="center"] .infomation .footermenu li { margin: 8px 12px;} #footer .in[data-layout="center"] address { text-align: center;} .sidefollow { position: fixed; top: 50%; right: 30px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; z-index: 1000;} .sidefollow[data-layout="left"] { right: auto; left: 0;} .sidefollow i { display: inline-block; transform: rotate(90deg) translate(-50%, -60%); font-size: 1.8rem; font-weight: 700;} .sidefollow .sns { display: inline-block;} .sidefollow .sns li a { background: #FFF;} #footer .widget .thumb, #footer .widget_search input[type="search"], #footer .widget select, #footer .widget_tag_cloud a { background: #FFF;} #footer .tabcontent{padding: 0;} #footer .tabcontent ul.list>li time{ order:1; } #footer .tabcontent ul.list>li h3{ margin:0px; order:2; } #footer .tabcontent ul.list>li p{display:none;order:3;} #footer article.tabcontents section .list div{ flex:1; display:flex; flex-direction:column; margin-left: 16px; text-align: left; } /*TOP*/ /*******************************************************************/ #ticker { display: flex; justify-content: center; align-items: center; padding: 12px; background: #222; font-weight: 700; color: #FFF;width: 100%;} #ticker span { margin-right: 8px; font-size: 1rem;} #ticker a { display: inline-block; padding: 4px 24px; background: #EA4698; border-radius: 32px; color: #FFF; white-space: nowrap;} .ticker_button_main{margin-left: 24px; background: #fff; border-radius: 32px;} .swiper-slide a { position: relative; display: block; opacity: 1;} .swiper-slide figure img { width: 100%;} .slide-prev, .slide-next { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 47px; height: 47px; background: #FFF; font-size: 1rem; z-index: 100; cursor: pointer;} .slide-prev { left: 0;} .slide-next { right: 0;} .swiper-button-disabled { opacity: 0.4;} #slide .swiper-slide::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); z-index: 1; pointer-events: none;} #slide .cat { position: absolute; bottom: 128px; left: 128px; z-index: 3;} #slide .cat li { padding: 6px 24px; color: #FFF;} #slide .slidetxt { position: absolute; bottom: 54px; left: 54px; display: flex; align-items: flex-end; color: #FFF; z-index: 2;width:50%;} #slide .slidetxt time { display: flex; flex-direction: column; text-align: center; margin-right: 24px; font-weight: 700; line-height: 1;} #slide .slidetxt time span { font-size: 3.8rem;} #slide .slidetxt time span.month { margin-bottom: 4px; padding: 4px 0; border-bottom: 2px solid #FFF;} #slide .slidetxt p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 60%; margin-top: 8px; font-size: 2rem; font-weight: 700;} #slide .slide-prev { left: 15.5%;} #slide .slide-next { right: 15.5%;} #subslide .slidetxt { position: relative; padding: 20px; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;} #subslide .slidetxt::after { content: ''; position: absolute; top: 0; left: 20px; width: 30px; height: 4px; background: #000;} #subslide .slidetxt time { font-size: 1.1rem; font-weight: 700; color: #A3A3A3;} #subslide .slidetxt p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-bottom: 4px; font-weight: 700;} #news { display: flex; align-items: flex-start;} #news section { flex: 1;} #news dl { font-weight: 700;} #news dt { clear: left; float: left; margin: 16px 0;} #news dd { padding: 16px 0 16px 80px;} .pr h2 { display: inline-block; padding: 2px 16px; background: #000; border-bottom: none; color: #FFF;} /*CONTENTS*/ /*******************************************************************/ #contents article + article { margin-top: 70px;} #contents header h1 { margin: 4px 0 40px; font-size: 2rem;} header h2, .widget h2,.widget>.widget-content>h3 { margin-bottom: 24px; padding-bottom: 12px; border-bottom: 3px solid #000; font-size: 2rem;} header h2 span, .widget h2 span { display: inline-block; margin-left: 20px; font-size: 1.2rem; /*color: #A3A3A3;*/} header h2 span.num { padding: 4px 8px; background: #F4F4F4; border-radius: 5px; font-size: 1.1rem; color: #222;} header.cattitle { margin: 12px 0 64px; text-align: center;} header.cattitle i { font-weight: 700; color: #A3A3A3;} header.cattitle h1 { margin: 6px 0 20px!important;} header.cattitle p { font-size: 1.2rem; color: #A3A3A3;} header.heading h2#writertitle { font-size: 1.6rem; border-bottom: 1px solid #E5E5E5;} header .link { float: right; font-weight: 700;} header .link span { font-size: 1rem;} header .meta { display: flex; justify-content: space-between; align-items: center; margin-top: -30px;} header .profile { display: flex; align-items: center; margin-bottom: 18px;} .profile figure { width: 60px; height: 60px; margin-right: 16px; margin-bottom: 0!important; border-radius: 50%;} .profile figure img { border: 3px solid #FFF;border-radius: 50%;} header .profile p { margin-bottom: 0!important; font-weight: 700;} header .date { margin-bottom: 18px;} header .date span { display: inline-block; margin-left: 16px; font-size: 1.1rem; font-weight: 700;} header .date time { display: inline-block;} header .category, header .tag { display: inline-block; margin: 0 16px 16px 0!important;} #contents .category > *, #contents .tag > * { /*display: inline-block;*/ margin: 3px; font-size: 1.2rem; font-weight: 700;} .category dd a { padding: 3px 4px; border: 1px solid #D9D9D9; border-radius: 5px;} .tag dd a { padding: 4px 5px; background: #F4F4F4; border-radius: 5px;} .breadcrumb_class{min-width:0;display:flex;} .breadcrumb_class__inner{display:inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .breadcrumb_class__inner:after {content: "";display: inline-block;width: 0;/*ellipsis使用時のsafari対策*/} #breadcrumbs { padding: 16px 0;} #breadcrumbs li { display: inline; font-size: 1.2rem;} #breadcrumbs li:not(:first-child)::before { content: '>'; margin: 0 8px;} .thumb { position: relative; background: #F4F4F4;} .thumb a { display: block;} .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; /*font-family: 'object-fit: cover; object-position: center;'*/;} .animated { opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;} .animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s} .animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s} .animated.slow{-webkit-animation-duration:2s;animation-duration:2s} .animated.slower{-webkit-animation-duration:3s;animation-duration:3s} .sns { display: flex; justify-content: center; margin-left: auto;} .sns li a { text-decoration: none;} .sns li a span { position: relative; z-index: 3;} .sns.circle li, .sns.square li { margin: 4px;} .sns.circle li a, .sns.square li a { position: relative; display: flex; justify-content: center; align-items: center; width: 43px; height: 43px; border: 1px solid #D9D9D9; border-radius: 50%;} .sns.circle li a:hover, .sns.square li a:hover { background: #222; border: unset; /*border: 1px solid #D9D9D9;*/ color: #FFF !important; opacity: 1;} .sns.circle li a[data-color="twitter"]:hover, .sns.square li a[data-color="twitter"]:hover { background-color: #1DA1F2;} .sns.circle li a[data-color="facebook"]:hover, .sns.square li a[data-color="facebook"]:hover { background-color: #3B5998;} .sns.circle li a[data-color="instagram"]:hover, .sns.square li a[data-color="instagram"]:hover { background: linear-gradient(135deg, rgba(40,60,221,1) 0%, rgba(191,32,210,1) 25%, rgba(255,36,140,1) 50%, rgba(254,133,0,1) 75%, rgba(255,206,87,1) 100%);} /*.sns.circle li a[data-color="instagram"]:hover::after, .sns.square li a[data-color="instagram"]:hover::after { opacity: 0;}*/ .sns.circle li a[data-color="hatena"]:hover, .sns.square li a[data-color="hatena"]:hover { background-color: #2C6EBD;} .sns.circle li a[data-color="line"]:hover, .sns.square li a[data-color="line"]:hover { background-color: #00C300;} .sns.circle li a[data-color="pocket"]:hover, .sns.square li a[data-color="pocket"]:hover { background-color: #EF4056;} .sns.circle li a[data-color="pinterest"]:hover, .sns.square li a[data-color="pinterest"]:hover { background-color: #E60023;} .sns.circle li a[data-color="youTube"]:hover, .sns.square li a[data-color="youTube"]:hover { background-color: #E60023;} .sns.square li a { border-radius: 0;} .widget-content .sns a{color:black;} .sns.wide li { width: 16%;} .sns.wide li a { width: auto;} .video { position: relative;} .video::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5) url("../img/play.svg") center no-repeat; pointer-events: none; z-index: 1;} .cat li { display: inline-block; font-size: 1.2rem; font-weight: 700;} .cat li a { display: inline-block; padding: 2px 12px; color: #FFF;} .list .cat li { margin-right:5px;margin-bottom:5px;} .list .cat li + .cat_time{ margin-left:26px;} /*[data-cat="cat1"] { background-color: #EA4698;}*/ .cat_position_right{ /*order: -1; */ margin-left: 0px;margin-bottom: 10px; } .cat_position_right time{ margin-top: 0px!important; } #contents_archive .cat_position_right time{ margin-top: 4px!important; } .post_time_set{ margin-bottom: 10px; margin-left: 0px!important; } [data-cat="cat2"] { background-color: #46C4EA;} [data-cat="cat3"] { background-color: #EA8546;} [data-cat="cat4"] { background-color: #52C972;} time { letter-spacing: 0.1em;} #body h2 { margin-top: 3em;} #body * + h3, #body * + h4, #body * + h5, #body * + h6 { margin-top: 2em;} #body h2, #body h3, #body h4, #body h5, #body h6, #body figure, #body p, .box { margin-bottom: 1.5em;} #body * + ul:not(.list):not(.cat):not(.sns):not(.wc_payment_methods), #body * + ol, #body * + dl, #body table, .read, .index, .follow, .snsbutton, .pagenav, .inbox, .writer, .accordion, .caption, .faq, .step, .card { margin-top: 3.5em; margin-bottom: 3.5em;} #body .category + .tag { margin-top: -2.5em;} #body h1, #body h2, #body h3, #body h4, #body h5, #body h6{ font-weight: 700; } #body h1 { font-size: 2.8rem;} #body h2 { font-size: 2.2rem;} #body h3 { font-size: 2.0rem;} #body h4 { font-size: 1.8rem;} #body h5 { font-size: 1.6rem;} #body h6 { font-size: 1.4rem;} #body h2[data-style="line"] { padding: 0 0 8px; background: none; border-bottom: 2px solid #222; color: #222;} #body h3[data-style="line"] { padding: 8px 0; background: none; border-top: 2px solid #D9D9D9; border-bottom: 2px solid #D9D9D9;} #body h4[data-style="line"] { padding: 0 0 8px; border-left: none; border-bottom: 2px dotted #D9D9D9;} #body h5[data-style="line"] { padding: 0 0 8px; border-left: none; border-bottom: 1px solid #222;} #body table { width: 100%; border-collapse: collapse; text-align: center;} #body th, #body td { padding: 8px; border: 1px solid #D9D9D9;} #body th[scope="col"] { background: #222; color: #FFF;} #body table:not([data-style="stripe"]) th[scope="row_sp"] { background: #F4F4F4;} #body table[data-style="stripe"] th, #body table[data-style="stripe"] td { border: none;} #body table[data-style="stripe"] tr:nth-child(even) { background: #F4F4F4;} #body table[data-style="simple"] th, #body table[data-style="simple"] td { border: none;} #body table[data-style="simple"] th[scope="col"] { background: none; color: #222;} #body table[data-style="simple"] tr { border-bottom: 2px solid #D9D9D9;} #body table[data-style="simple"] tr:first-of-type { border-bottom-color: #222;} #body ul:not(.list):not(.cat):not(.sns):not(.wc_payment_methods) { margin-left: 2em; list-style: disc;} #body ul:not(.list):not(.cat):not(.sns):not(.wc_payment_methods) li { position: relative; margin: 6px 0;} #body ul[data-style*="check"] { list-style: none!important;} #body ul[data-style*="check"] > li::before { content: '\e902'; position: absolute; top: 6px; left: -2em; font-size: 1rem;} #body ul[data-style*="line"] > li::after { content: ''; position: absolute; bottom: 0; left: -2em; width: 100%; height: 1px; background: #D9D9D9;} #body ul[data-style*="horizontal"] > li { display: inline-block; margin-right: 32px!important;} #body ol { counter-reset: number; margin-left: 2em;} #body ol li { position: relative; margin: 6px 0;} #body ol:not(.step) > li::before { counter-increment: number; content: counter(number); position: absolute; top: 0; left: -2em; display: block; width: 1em;font-size: 0.8em;padding: 0.1em;text-align: center; background: #222; color: #FFF;} #body ol:not(.step) > li ol li::before { background: none; border: 1px solid #222; color: #222;} #contents .list { display: flex; flex-wrap: wrap; justify-content: space-between;} #contents .list > li { position: relative; width: calc(50% - 20px); margin-bottom: 30px;} #contents .list.three::after { content: ''; display: block; width: calc(100% / 3 - 20px);} #contents .list.three > li { width: calc(100% / 3 - 20px);} #contents .list > li a{display: -webkit-box!important;line-height: 1.4;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;} #contents .list > li figure { width: 100%; padding-top: calc(235 / 385 * 100%);} #contents .list > li time,#contents .list > li .wpp_li_date{ display: block; margin-top: 0px; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; color: #A3A3A3;} #contents .list > li h3 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 16px 0 0; padding: 0; background: none; font-size: 1.4rem; font-weight: 700;} #contents .list > li p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-top: 8px;margin-bottom: 8px;font-size: 1.2rem; color: #A3A3A3;} #contents .list > li figure + .cat{ position: absolute; top: 0; left: 0; z-index: 1;font-size: 0;} #contents .list.highlighted { display: block;} #contents .list.highlighted::after { content: ''; display: block; clear: both;} #contents .list.highlighted > li:nth-child(1) { float: left;} #contents .list.highlighted > li:nth-child(n+2) { float: right; display: flex; align-items: flex-start; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #E5E5E5} #contents .list.highlighted > li:last-child { border-bottom: none;} #contents .list.highlighted > li:nth-child(n+2) figure { width: 100px; height: 80px; padding-top: 0;} #contents .list.highlighted > li:nth-child(n+2) div { flex: 1; display: flex; flex-direction: column-reverse; margin-left: 16px;} #contents .list.highlighted > li:nth-child(n+2) time { margin-top: 0;} @media only screen and (min-width: 1025px) { #contents .list.row { display: block;} #contents .list.row > li { position: relative; display: flex; align-items: flex-start; width: auto;} #contents .list.row > li figure { width: 30%; padding-top: calc(235 / 385 * 30%);} #contents .list.row > li div { flex: 1; display: flex; flex-direction: column; margin-left: 16px;} #contents .list.row > li div time { order: -1;} #contents .list.row > li .cat li a, #contents .list.three > li .cat li a { padding: 2px 12px;} #contents .list.text > li { display: block; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #D9D9D9;} #contents .list.text > li:last-child { border-bottom: none;} #contents .list.text > li .cat { display: inline-block; margin-right: 24px;} #contents .list.text > li time { display: inline-block; margin-right: 24px;} .sp_area{display: none!important} } .contents_archive .list > li figure + .cat {margin-left:0px;} @media only screen and (max-width: 1024px) { #contents .list.row_sp { display: block;} #contents .list.row_sp > li { position: relative; display: flex; align-items: flex-start; width: auto; margin-left: 0px;} #contents .list.row_sp > li figure { width: 30%; padding-top: calc(235 / 385 * 30%);} #contents .list.row_sp > li div { flex: 1; display: flex; flex-direction: column; margin-left: 16px;} #contents .list.row_sp > li div time { order: -1;} #contents .list.row_sp > li .cat li a, #contents .list.three > li .cat li a { padding: 2px 12px;} #contents .list.text_sp > li { display: block; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #D9D9D9;} #contents .list.text_sp > li:last-child { border-bottom: none;} #contents .list.text_sp > li .cat { display: inline-block; margin-right: 24px;} #contents .list.text_sp > li time { display: inline-block; margin-right: 24px;} .pc_area{display: none;} } #contents .widget .list li{display: block;} #contents .widget .list.row li{display: flex;} .pagination { margin-top: 40px; text-align: center; font-size: 1.2rem; font-weight: 700;} .pagination a { display: inline-block; margin: 4px; padding: 8px 14px; vertical-align: middle; border: 1px solid #E5E5E5; border-radius: 3px;} .pagination span { display: inline-block; margin: 4px; padding: 8px 14px; vertical-align: middle;} .pagination span.current { background: #E5E5E5; border: 1px solid #E5E5E5; border-radius: 3px;} .next span,.prev span{margin: 0;padding: 0;} .pagenav { display: flex; align-items: center;} .pagenav > div { flex: 1;} .pagenav > div a { display: flex; justify-content: space-between; align-items: center;} .pagenav > div a figure { width: 100px; height: 100px; margin-bottom: 0!important;} .pagenav > div a p { width: calc(100% - 140px); margin-bottom: 0!important; padding: 20px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-weight: 700;} .pagenav > div.prev a::before { transform: scaleX(-1);} .pagenav > div.next { border-left: 1px solid #E5E5E5;} .pagenav > div.next a { flex-direction: row_sp-reverse;} .pagenav .prev a::before { content: '\e900'; margin: 0 8px; color: #E5E5E5;} .pagenav .next a::after { content: '\e900'; margin: 0 8px; color: #E5E5E5;} .recommend { position: relative; padding: 48px 30px 0; background: #F4F4F4; border: 1px solid #D9D9D9;} .recommend h2 { position: absolute; top: 0; left: 16px; padding: 4px 16px; transform: translateY(-50%); background: #222; font-size: 1.6rem; color: #FFF;} .recommend.alt { background: none;} .recommend.alt h2 { background: #FFF; color: #222;} #contents .recommend .list{margin-bottom: 0px;} #contents .recommend>.list>li{padding-bottom: 0px;margin-bottom:40px} .read { max-width: 600px; margin: 3.5em auto; padding: 10px 0; text-align: center; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; font-size: 1.2rem;} .index { display: inline-block; padding: 30px; background: #F4F4F4;margin-top: 5px;margin-bottom: 5px;} .index p { padding-bottom: 8px; border-bottom: 1px solid #D9D9D9; font-size: 1.6rem; font-weight: 700;} .index ul { margin: 0 !important; list-style: none!important;} .index.is-style-doubleline ul.level1 { padding: 30px; } .index.is-style-tag-tags ul.level1>li,.is-style-toc-pick ul.level1>li{ padding: 5px 50px 5px 20px; } .index > ul li { margin: 9px 0!important;} .index > ul > li > a { font-weight: 700;} .index > ul > li ul { font-size: 1.2rem;} .is-style-doubleline,.is-style-tag-tags ,.is-style-toc-pick{ background-color: rgba(255,255,255,1); padding: 0px; width: inherit; } @media only screen and (max-width: 428px){ .is-style-doubleline,.is-style-tag-tags ,.is-style-toc-pick{ background-color: rgba(255,255,255,1); padding: 0px; width: 100%; } } .follow { display: flex; align-items: center; background: #222;} @media only screen and (max-width: 1024px) { .follow{display: block;} } .follow figure { flex: 1; width: 100%; height: 235px; margin-bottom: 0!important;} .follow > div { flex: 1; padding: 16px; color: #FFF; text-align: center; font-weight: 700;} .follow > div .sns a { background-color: #FFF;} .follow > div p { margin-bottom: 1em!important;} .follow > div div { margin-top: 1em; font-size: 1.2rem;} .snsbutton { text-align: center;} .snsbutton i { font-size: 2rem; font-weight: 700;} .snsbutton i + div ,.snsbutton i + div + ul + div{ margin: 8px 0; font-size: 1.2rem; font-weight: 700; color: #A3A3A3;} .share_comment{margin: 8px 0; font-size: 1.2rem; font-weight: 700; color: #A3A3A3;text-align: center;} .inbox { padding: 32px; text-align: center; background: #222; color: #FFF;} .inbox h3 { display: inline-block; margin-bottom: 24px; text-align: center; background: none!important; border-bottom: 1px solid #707070; font-size: 1.6rem;} .inbox strong { color: #EA4698;} .inbox .btn a { display: inline-block; padding: 8px 32px; background: #EA4698; border-radius: 40px; font-weight: 700; color: #FFF;} .writer { display: flex; margin-top: 2em; padding-bottom: 2em; border-bottom: 1px solid #E5E5E5 !important;} .writer .profile { text-align: center; font-weight: 700;} .writer .profile figure { width: 88px; height: 88px; margin: 0 0 8px;} .writer .info { flex: 1; margin-left: 24px;} .writer .sns { justify-content: flex-start; margin-top: 16px;} .writer .info>p{white-space: pre-wrap;} @media screen and (max-width: 560px){ .writer {flex-wrap: wrap;} .writer .profile { width: 100%;margin-bottom: 10px;} .writer .info { width: 100%;margin-left: 0;} .writer .profile figure {margin: 0 auto;} .writer .sns {justify-content: center;} } .comment-form p { margin-bottom: 2em;} .comment-form label { display: block; margin-bottom: 8px; font-weight: 700;} .comment-form .comments-required { margin-left: 8px; padding: 2px 4px; background: #222; font-size: 1.2rem; color: #FFF;} .comment-form input[type*="text"], .comment-form input[type*="email"], .comment-form input[type*="url"], .comment-form textarea { width: 80%; padding: 8px; border: 1px solid #DFDFDF; border-radius: 5px; font-size: 16px;} .comment-form textarea { width: 100%;} .form-submit { text-align: center;} .form-submit input[type*="submit"] { display: inline-block;text-decoration: none;padding: 8px 32px; background: #222; border: none; border-radius: 30px; font-size: 1.6rem; font-weight: 700; color: #FFF; transition: background 0.5s; } .form-submit input[type*="submit"]:hover { background:rgb(34 34 34 / 50%);} .comments-list > li { margin-bottom: 2em;} .comments-list .children { margin-top: 1em; padding-left: 2em; border-left: 2px solid #E5E5E5;} .comments-meta-list { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 8px;} .comments-meta-list > *:not(:first-child) { padding-left: 16px;} .comments-author-name { font-weight: 700;} .comments-date { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; color: #A3A3A3;} .comments-reply { text-align: right;} .comments-reply a { display: inline-block; padding: 2px 8px; background: #F4F4F4; border-radius: 5px;} .notfound { text-align: center;} .notfound header i { font-size: 10rem; font-weight: 700; line-height: 1; color: #F4F4F4;} .notfound header i span { font-size: 20rem;} .notfound header h1 { position: absolute; top: calc(50% + 1em); left: 0; width: 100%;} .notfound section { margin: 70px 0;} .notfound section .widget_search { max-width: 400px; margin: 70px auto;} .marker { position: relative; display: inline-block; padding: 0 4px; font-weight: 700;} .marker[data-color="color1"] { background: #FFCE9C;} .marker[data-color="color2"] { background: #FCF598;} .marker[data-color="color3"] { background: #ADFFAA;} .marker[data-color="color4"] { background: #9BDBFF;} .marker[data-color="color1"][data-style="diagonal"], .highlighter[data-color="color1"][data-style="diagonal"]::before { background: repeating-linear-gradient(-45deg,#FFCE9C,#FFCE9C 2px,#FFF 0,#FFF 4px);} .marker[data-color="color2"][data-style="diagonal"], .highlighter[data-color="color2"][data-style="diagonal"]::before { background: repeating-linear-gradient(-45deg,#FCF598,#FCF598 2px,#FFF 0,#FFF 4px);} .marker[data-color="color3"][data-style="diagonal"], .highlighter[data-color="color3"][data-style="diagonal"]::before { background: repeating-linear-gradient(-45deg,#ADFFAA,#ADFFAA 2px,#FFF 0,#FFF 4px);} .marker[data-color="color4"][data-style="diagonal"], .highlighter[data-color="color4"][data-style="diagonal"]::before { background: repeating-linear-gradient(-45deg,#9BDBFF,#9BDBFF 2px,#FFF 0,#FFF 4px);} .highlighter { position: relative; display: inline-block; padding: 0 4px; font-weight: 700;} .highlighter[data-color="color1"] { background: linear-gradient(transparent 50%, #FFCE9C 0%);} .highlighter[data-color="color2"] { background: linear-gradient(transparent 50%, #FCF598 0%);} .highlighter[data-color="color3"] { background: linear-gradient(transparent 50%, #ADFFAA 0%);} .highlighter[data-color="color4"] { background: linear-gradient(transparent 50%, #9BDBFF 0%);} .highlighter[data-style="diagonal"] { background: none;} .highlighter[data-style="diagonal"]::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; z-index: -1;} .line { text-decoration-style: solid; text-decoration-line: underline; text-decoration-color: #EA4698;} .line[data-style="double"] { text-decoration-style: double;} .line[data-style="dotted"] { text-decoration-style: dotted;} .line[data-style="dashed"] { text-decoration-style: dashed;} .moveline { position: relative; display: inline-block;} .moveline::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 4px; background: #FDCE9C;} .moveline.on::after { animation: moveline 2s normal forwards ease-in-out 0.5s;} @keyframes moveline { 0% { width: 0;} 33% { width: 100%;} 100% { width: 100%;}} .tab ul { display: flex; align-items: flex-end; width: 100%; margin-bottom: 30px;} .tab[data-layout="center"] ul { text-align: center;} .tab li { flex: 1; border-bottom-color: #E5E5E5; cursor: pointer;} .tab li h2 { position: relative; border-bottom-color: #E5E5E5;} .tab li h2::after { content: ''; position: absolute; right: 0; bottom: -3px; display: block; width: 100%; height: 3px; background: #000; transform: scale(0, 1); transform-origin: right top; transition: transform .3s;} .tab li.on h2::after { transform-origin: left top; transform: scale(1, 1);} .tab li h2 span { display: block; margin-left: 0;} .accordion dt { position: relative; margin-top: 20px; padding: 20px 32px 20px 20px; background: #F4F4F4; font-weight: 700; cursor: pointer;} .accordion dt::after { content: '\e900'; position: absolute; top: calc(50% - 0.5em); right: 20px; transform-origin: center; transform: rotate(90deg); font-size: 1rem; transition: transform .3s;} .accordion dt.on::after { transform: rotate(270deg);} .accordion dd { display: none; padding: 20px 20px 0;} .accordion[data-style*="simple"] dt { background: none; border-left: 4px solid #222; border-bottom: 1px solid #D9D9D9;} .accordion[data-style*="simple"] dd { padding: 0 20px 20px; border-left: 4px solid #222; border-bottom: 1px solid #D9D9D9;} .accordion[data-style*="simple"] dt.on { border-bottom: none;} .accordion[data-style*="dashed"] dt { background: none; border: 1px dashed #D9D9D9;} .accordion[data-style*="dashed"] dd { padding: 0 20px 20px; border: 1px dashed #D9D9D9; border-top: none;} .accordion[data-style*="dashed"] dt.on { border-bottom: none;} .accordion[data-style*="dashed"] dt::after, .accordion[data-style="color"] dt::after { content: '\e90a';} .accordion[data-style*="dashed"] dt.on::after, .accordion[data-style="color"] dt.on::after { content: '\e908'; transform: rotate(180deg);} .accordion[data-style*="color"] dt { background: #222; color: #FFF;} .accordion[data-style*="color"] dd { padding: 20px; border: 1px solid #D9D9D9; border-top: none;} .accordion[data-style*="faq"] dt, .accordion[data-style="faq"] dd { position: relative; padding-left: 48px; padding-right: 48px;} .accordion[data-style*="faq"] dt::before { content: 'Q'; position: absolute; top: 18px; left: 20px; font-size: 2rem;} .accordion[data-style*="faq"]:not([data-style*="line"]) dd::before { content: 'A'; position: absolute; top: 18px; left: 20px; font-size: 2rem; font-weight: 700;} .accordion[data-style*="line"] dt { background: none; border-bottom: 1px solid #D9D9D9;} .accordion[data-style*="line"] dt::before { content: '\e90a'; position: absolute; top: 22px; left: 20px; font-size: 1.6rem; transition: transform .3s;} .accordion[data-style*="line"] dd { padding: 0 20px 20px; border-bottom: 1px solid #D9D9D9;} .accordion[data-style*="line"] dt.on { border-bottom: none;} .accordion[data-style*="line"] dt.on::before { transform: rotate(45deg);} .balloon { display: flex; align-items: flex-start;} .balloon > figure { width: 75px; padding-top: 75px; background: #222; border-radius: 50%;} .balloon > figure img { border-radius: 50%;} .balloon > div { position: relative; max-width: calc(100% - 200px); min-height: 72px; margin: 16px 32px; padding: 16px; background: #F4F4F4;} .balloon > div p { margin-bottom: 0!important;} .balloon > div::before, .balloon > div::after { content: ''; position: absolute; top: 18px; right: 100%; width: 0; height: 0; border-style: solid; border-width: 8px 16px 8px 0; border-color: transparent #f4f4f4 transparent transparent;} .balloon.reverse { flex-direction: row_sp-reverse;} .balloon.reverse > div::before, .balloon.reverse > div::after { right: auto; left: 100%; transform: rotate(180deg);} .balloon[data-style*="round"] > div, .balloon[data-style*="bubble"] > div { border-radius: 20px;} .balloon[data-style*="bubble"] > div::before, .balloon[data-style*="bubble"] > div::after { transform: translate(-4px, 28px); width: 16px; height: 16px; background: #F4F4F4; border: none; border-radius: 50%;} .balloon[data-style*="bubble"] > div::after { width: 10px; height: 10px; transform: translate(-18px, 20px);} .balloon[data-style*="bubble"].reverse > div::before { transform: translate(4px, 28px);} .balloon[data-style*="bubble"].reverse > div::after { transform: translate(18px, 20px);} .balloon[data-style*="line"] > div { background: none; border: 1px solid #D9D9D9;} .balloon[data-style*="line"]:not([data-style*="bubble"]) > div::before { border-color: transparent #D9D9D9 transparent transparent;} .balloon[data-style*="line"]:not([data-style*="bubble"]) > div::after { transform: translateX(2px); border-color: transparent #FFF transparent transparent;} .balloon.reverse[data-style*="line"]:not([data-style*="bubble"]) > div::after { transform: rotate(180deg) translateX(2px);} .balloon[data-style*="bubble line"] > div::before, .balloon[data-style*="bubble line"] > div::after { background: none; border: 1px solid #D9D9D9;} .captiontitle { padding: 8px; text-align: center; background: #222; font-size: 1.6rem; font-weight: 700; color: #FFF;} .captiontext { padding: 20px; border: 1px solid #222;} .captiontext p { margin-bottom: 0!important;} .caption[data-style="small"] .captiontitle { display: inline-block;} .caption[data-style="back"] .captiontitle { display: inline-block; transform: translate(10px, 50%);} .caption[data-style="back"] .captiontext { padding-top: 40px; background: #F4F4F4; border: none;} .caption[data-style="frame"] .captiontitle { display: inline-block; transform: translate(10px, 50%); background: #FFF; color: #222;} .caption[data-style="frame"] .captiontext { padding-top: 30px;} .button { display: inline-block; margin: 4px; padding: 8px 32px; text-align: center; background: #222; border-radius: 40px; font-weight: 700; color: #FFF;} .button[data-style*="line"] { background: none; border: 1px solid #222; color: #222;} .button[data-style*="square"] { border-radius: 0;} .button[data-style*="square"]::after { content: '\e900'; margin-left: 8px; font-size: 1rem;} .button[data-color*="color1"] { background: #EA4698;} .button[data-style*="line"][data-color*="color1"] { background: none; border-color: #EA4698; color: #EA4698;} .button[data-style*="large"] { font-size: 2rem;} .button[data-color*="gradation1"] { background: rgb(0,0,0); background: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(252,132,132,1) 0%, rgba(255,206,156,1) 100%);} .button[data-color*="gradation2"] { background: rgb(0,0,0); background: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(248,157,51,1) 0%, rgba(252,245,152,1) 100%);} .button[data-color*="gradation3"] { background: rgb(0,0,0); background: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(71,214,192,1) 0%, rgba(173,255,170,1) 100%);} .button[data-color*="gradation4"] { background: rgb(0,0,0); background: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(81,105,237,1) 0%, rgba(155,219,255,1) 100%);} .box { position: relative; padding: 20px; border: 1px solid #222;} .box[data-style="dotted"] { border-style: dotted;} .box[data-style="grey"] { border-color: #DFDFDF;} .box[data-style="dashed"] { border-style: dashed;} .box[data-style="back"] { background: #222; border: none; color: #FFF;} .box[data-style="greyback"] { background: #F4F4F4; border: none;} .box[data-style="icon"] { margin-top: 2em; padding-top: 32px;} .box[data-style="icon"] span { position: absolute; top: 0; left: 0; transform: translate(20px, -50%);display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #222; border-radius: 50%; font-size: 2rem; color: #FFF;} .faq dt { position: relative; padding: 8px 0 8px 48px; font-size: 1.6rem;} .faq dt::before, .faq dd::before { content: 'Q'; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #222; border-radius: 50%; font-size: 2rem; font-weight: 700; color: #FFF;} .faq dd { position: relative; margin: 8px 0 16px; padding: 8px 0 16px 48px;} .faq dd::before { content: 'A'; background: #FFF; border: 1px solid #222; color: #222;} .card .cardtitle { transform: translate(10px, 50%); display: inline-block; padding: 8px; text-align: center; background: #FFF; font-size: 1.6rem; font-weight: 700;} .card .cardtext { display: flex; justify-content: space-between; padding: 30px 20px 20px; border: 1px solid #222;} .card .cardtext > figure { width: 30%; margin-bottom: 0!important;} .card .cardtext > div { display: flex; flex-direction: column; width: 66%;} .card .cardtext .title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 700;} .card .cardtext p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 8px 0!important; font-size: 1.2rem; color: #A3A3A3;} .card .more { margin-top: auto; text-align: right;} .card .more a { display: inline-block; padding: 4px 8px; background: #F4F4F4; border-radius: 5px;} .card .more a span, .card .url a span { font-size: 1rem;} .card .url { margin-top: auto;} .card .url a { word-break: break-all;} .card .cardtitle.alt { background: #222; color: #FFF;} .card[data-style="alt"] .cardtext { background: #F4F4F4;} .card .btnlist { margin-top: auto;} .btnlist { display: flex; margin: 0 -12px;} .btnlist > * { flex: 1; margin: 12px;} /*WIDE PC*/ @media only screen and (max-width: 1340px){ .sidefollow { display: none;} } /*PC*/ @media only screen and (min-width: 1025px){ .logo { padding: 8px 0; font-size: 3.3rem; font-weight: 700; letter-spacing: 0.1em;} #catchcopy { font-size: 1.2rem;} #nav { margin-left: auto;} .menu { display: flex; flex-wrap: wrap; align-items: center;} .menu > li { position: relative; font-weight: 700;} .menu > li:not(:first-child) { margin-left: 20px;} .menu > li > a { position: relative; display: block; height: 68px; padding: 24px 0; overflow: hidden;} .menu > li > a::after { content: ''; position: absolute; right: 0; top: 0; display: block; width: 100%; height: 4px; background: #000; transform: scale(0, 1); transform-origin: right top; transition: transform .3s;} .menu > li > a:hover { opacity: 1;} .menu > li:hover > a::after { transform-origin: left top; transform: scale(1, 1);} .menu > li ul { pointer-events: none; opacity: 0; position: absolute; top: 100%; left: 0; width: 250px; background: #F4F4F4; transition: .2s ease-out; z-index: 1;} .menu > li ul a { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-top: 1px solid #E5E5E5;} .menu > li ul a::after { content: '\e904'; font-size: 1rem; color: #C9C9C9;} .menu > li:hover ul { pointer-events: auto; opacity: 1;} .menu > li ul a:hover { background-color: #222;color:#fff !important; opacity: 1;} .menu > li ul a:hover::after { color: #FFF;} .menu > li:last-child ul{left: auto;right: 0;} #open, #navclose { display: none;} #spnav { display: none;} #column { display: flex; justify-content: space-between; width: 100%; max-width: calc(1160px + 40px); margin: 70px auto; padding: 0 20px;} #contents { flex: 1;} #aside { width: 300px; margin-left: 50px;} #news header { white-space: nowrap; margin-right: 24px; padding-right: 24px; border-right: 3px solid #000;} #news header h2 { margin-bottom: 0; padding-bottom: 0; border-bottom: none;} #news header h2 span { display: block; margin: 8px 0 0;} } /*TABLET.SP*/ @media only screen and (max-width: 1024px){ #header { min-height: 70px;} #header .in { padding: 0;} #global { padding-top: 20px; border-right: none;} #global::after { display: none;} .main_header .search { position: static; margin-left: auto;} .main_header .icon-search:before{font-size: 1.8rem;} .main_header .searchbtn { position: relative; width: 50px; height: 50px; transition: .2s linear; display: flex;justify-content: center;align-items: center;} .main_header .search form { left: 0;top: 100%;flex-wrap: wrap;justify-content: center;} .main_header .search form input[type="search"] { flex: 1;} .main_header .search.open form { top: 100%;} .main_header .search.open .searchbtn{ background: #222; color: #FFF;} #catchcopy { position: absolute; top: 0; left: 0; width: 100%; height: 20px; line-height: 20px; padding: 0 10px; border-bottom: 1px solid #E5E5E5; font-size: 1.2rem;} .search form input[type="search"] { width: 200px;} .search .searchbtn { font-size: 2rem;} .searchbtn span { position: relative; transition: .2s ease-out; z-index: 1;} .main_header .searchbtn::before,.main_header .searchbtn::after { content: ''; position: absolute; top: 25px; left: 14px; display: block; width: 22px; height: 2px; background: #FFF; transition: .2s linear;} .main_header .search.open .searchbtn::before { transform: rotate(45deg);} .main_header .search.open .searchbtn::after { transform: rotate(-45deg);} .main_header .search.open .searchbtn span { opacity: 0;} .logo { font-size: 2.4rem; font-weight: 700;} #nav { pointer-events: none; position: absolute; top: 69px; left: 0; width: 100%; height: 0; background: #000; overflow: auto; z-index: 8888; transition: .8s cubic-bezier(.19,1,.22,1);} #nav .sns { margin: 12px 0;} #nav .sns li { margin: 8px 16px;} #nav .sns li a { color: #FFF;} .menu li a { display: block; padding: 16px 20px; background: #000; border-bottom: 1px solid #2E2E2E; font-weight: 700; color: #FFF!important;} .menu > li ul li a { background-color: #292929; border-bottom-color: #4D4D4D;} .menu > li ul li:last-child a { border-bottom: none;} .menu > li ul li a::before { content: '\e904'; margin-right: 8px; font-size: 1rem; color: #C9C9C9;} #open { display: flex; align-items: center; width: 50px; height: 50px; cursor: pointer; transition: .2s linear;} #open div { position: relative; display: block; width: 22px; height: 14px; margin: 0 auto 4px;margin-bottom: 0px; transition: .2s linear;} #open span { position: absolute; left: 0; display: block; width: 22px; height: 2px; background: #000; transition: .2s linear;} #open span:nth-child(1) { top: 0;} #open span:nth-child(2) { top: 0; bottom: 0;margin: auto;} #open span:nth-child(3) { bottom: 0;} .open-menu #open { background: #222;} .open-menu #open span:nth-child(1) { top: 7px; transform: rotate(45deg); background: #FFF;} .open-menu #open span:nth-child(2) { width: 0;} .open-menu #open span:nth-child(3) { top: 7px; transform: rotate(-45deg); background: #FFF;} .open-menu #nav { pointer-events: auto; height: calc(100vh - 69px);} .open-menu #nav ul{ margin-left: 0;margin-top: 0;} .open-menu #nav ul li{ margin-left: 0;margin-top: 0;} #navclose { margin-bottom: 20px; text-align: center; font-weight: 700; color: #FFF; cursor: pointer;} #navclose span { display: block; font-size: 3rem;} #global[data-layout="center"] { justify-content: space-between;} #global[data-layout="center"] .search { order: -1; margin-left: 0;} #global[data-layout="center"] .searchbtn { border-left: none; font-size: 2rem;} #global[data-layout="center"] #open { border-left: none;} #spnav { width: 100vw; margin: 0 -20px; padding: 8px 4px; border-top: 1px solid #E5E5E5;} #spnav ul { display: flex; flex-wrap: wrap; justify-content: center;} #spnav li { margin: 4px; font-size: 1.2rem; font-weight: 700;} #column { margin: 70px 0; padding: 0 20px;} #aside { margin-top: 120px;margin-right: 0px!important;} #footer aside.in { display: block; padding-bottom: 30px;} #footer .in .col { width: auto;} #footer .search form { right: auto; left: -60px;} .infomation .logo { width: 100%; padding: 0;} .infomation .sns { margin: 16px -10px;} .infomation .searchbtn { margin-left: 20px; font-size: 1em;} .infomation .footermenu { margin-top: 8px;} .infomation .footermenu li { margin: 0 24px 8px 0; font-size: 1.2rem;} #footer .in[data-layout="center"] .logo { margin-bottom: 20px!important;} #footer .in[data-layout="center"] .search form { left: auto; right: -60px;} #footer .in[data-layout="center"] .infomation .searchbtn { margin-left: 10px;} #ticker { font-size: 1rem;} .slide-prev, .slide-next { width: 20px; height: 24px;} #slide .cat { position: absolute; top: 0; left: 0;} #slide .cat li { padding: 2px 8px;} #slide .slidetxt { bottom: 20px; left: 16px; flex-direction: column; align-items: flex-start;} #slide .slidetxt time { font-size: 0.8rem;} #slide .slidetxt time span { font-size: 2.2rem;} #slide .slidetxt p { clear: left; width: 92%; margin-top: 8px; font-size: 1.4rem; line-height: 1.4;} #slide .slide-prev { left: 0;} #slide .slide-next { right: 0;} #news { display: block;} header .date span { display: block;} #breadcrumbs .in { padding: 0 8px;} .cat li { float: left;font-size: 1rem;} .cat li a { padding: 2px 8px;} .tab li h2 { font-size: 1.6rem;} .tab li h2 span { font-size: 1rem;} #body header h1 { font-size: 1.4rem;} #body header .profile { margin-bottom: 8px;} #body header .date { margin-bottom: 10px;} #body header .category { margin-bottom: 8px!important;} #contents .list { display: block;} #contents .list > li { /*width: auto!important;*/ width:100%!important; } #contents .list.highlighted > li:nth-child(1) { float: none;} #contents .list.row_sp > li { } #contents .list.row_sp > li figure { width: 100px; margin-bottom: 0; padding-top: 100px;} #contents .list > li figure + .cat { max-width: 100px;} #contents .list.row_sp > li time { margin: 4px 0;} #contents .list.row_sp > li h3 { -webkit-line-clamp: 3; margin: 0;} #contents .list.row_sp > li p { display: none;} .pagenav { display: block;} .pagenav > div { margin-bottom: 20px;} .pagenav > div a figure { width: 60px; height: 60px;} .pagenav > div a p { width: calc(100% - 100px);} .pagenav > div.next { border-left: none;} .follow figure { height: 250px;} .follow > div { padding: 8px;padding-top: 16px;padding-bottom: 16px;} .follow > div p { margin-bottom: 4px!important; font-size: 1.2rem;} .follow > div div { margin-top: 4px; font-size: 1rem;} .balloon > figure { width: 50px; padding-top: 50px;} .balloon > div { max-width: calc(100% - 80px); margin: 0 0 24px 32px;} .balloon.reverse > div { margin: 0 32px 24px 0;} .card { position: relative;} .card .cardtitle { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);} .card .cardtext { display: block; padding: 40px 20px 20px; border: 1px solid #222;} .card .cardtext > figure { width: 70%; margin: 0 auto 20px!important;} .card .cardtext > div { width: auto;} .card .more { margin-top: 8px;} .btnlist { display: block;} .btnlist a { display: block;} } /*SP*/ @media only screen and (max-width: 767px){ .notfound header i { font-size: 14vw;} .notfound header i span { font-size: 30vw;} #subslide .swiper-slide a { display: flex;} #subslide .swiper-slide figure { width: 50%;} #subslide .slidetxt { width: calc(50% - 40px); background: #FFF; border-left: none;} #subslide .swiper-slide.swiper-slide-active .slidetxt { opacity: 1;} #subslide .slidetxt p { -webkit-line-clamp: 2; font-size: 1.2rem;} } @media print { #container { width: 1024px;} } .widget .list > li figure + .cat { position: absolute; top: 0; left: 0; z-index: 1;} .widget .list > li {position: relative;} /*style-development.css*/ /*** all ***/ *, *::before, *::after { box-sizing: unset; -webkit-font-smoothing: unset; } *, ::after, ::before { box-sizing: border-box } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; padding-right: 15px; padding-left: 15px } .col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow_sp: 1; max-width: 100% } @font-face { font-family: icomoon; src: url(fonts/icomoon.eot?qqyuxn); src: url(fonts/icomoon.eot?#iefixqqyuxn) format("embedded-opentype"), url(fonts/icomoon.woff?qqyuxn) format("woff"), url(fonts/icomoon.ttf?qqyuxn) format("truetype"), url(fonts/icomoon.svg?qqyuxn#icomoon) format("svg"); font-weight: 400; font-style: normal } body a { color: #222;} body header .taxonomies a { color: #222!important;} body a:hover { text-decoration: none; } body figure { margin: 0; } .widget_categories form::after{ content: none; } .breadcrumb_home_name{ display:none; } body .pagination .nav-links { font-size: 1.2rem; font-weight: 700; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } body .pagination .pagination_arrow_sp { padding: 0px; margin: 0; } .in {width: 100%;} #breadcrumbs + * { margin-top: 0!important;} /*** home ***/ .tabcontents header ul{ margin-left: 0; } .tabcontents header li{ margin-left: 0; } #site-content #news .animated { padding-right: 24px; } .main_navi{ display: flex; flex-wrap: wrap; z-index: 1000; position: relative; } #masthead{ padding-bottom:0px; padding-top: 0px; margin-top: 0!important; z-index: 200; position: relative; } .flexslider .slides li { position: relative } .flexslider .slides>li { margin-left: 0; margin-top: 0; margin-bottom: 0; margin-right: 0; } .flex-container a:active, .flex-container a:focus, .flexslider a:active, .flexslider a:focus { outline: 0 } .flex-control-nav, .flex-direction-nav, .slides { margin: 0; padding: 0; list-style: none } .flexslider { padding: 0; position: relative; zoom: 1 } .flex-direction-nav a, .no-js .slides>li:first-child, .slides:after, html[xmlns] .slides { display: block } .flex-pauseplay span { text-transform: capitalize } .slides:after { content: "."; clear: both; visibility: hidden; line-height: 0; height: 0 } .flex-direction-nav .flex-next:before, .flex-direction-nav .flex-prev:before { content: "\e904"; font-family: 'icomoon' } * html .slides { height: 1% } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease } .flexslider .slides { zoom: 1; z-index: 1 } .flex-direction-nav li { margin-left: 4px; text-align: center; height: 100vh } .flex-direction-nav li:last-child { float: right } .flex-direction-nav li:first-child{ float: left; } .flex-direction-nav a { position: absolute; width: 100px; height: 50px; margin: auto; cursor: pointer; text-indent: -999px; overflow: hidden; top: 0; bottom: 0; color: rgba(255, 255, 255, 1.00); opacity: .8 } .flex-direction-nav a:hover { opacity: 1 } .flex-direction-nav .flex-next { right: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out } .flex-direction-nav .flex-prev { left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out } .flexslider:hover .flex-next:hover { right: -5px } .flexslider:hover .flex-prev:hover { left: -5px } .flex-direction-nav .flex-disabled { opacity: .3 !important; filter: alpha(opacity=30); cursor: default } .flex-direction-nav a:before { font-size: 44px; line-height: 10px; position: absolute; text-align: center; left: 0; right: 0; top: 20px; text-indent: 0 } .flex-direction-nav .flex-prev:before { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } .flex-control-nav { width: 100%; bottom: 20px; text-align: center; z-index: 10 } .flex-control-nav li { margin: 0 7px; display: inline-block; zoom: 1 } .flex-control-nav li a { background: rgba(255, 255, 255, .3); width: 8px; height: 8px; display: block; cursor: pointer; text-indent: -999px; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; border: rgba(255, 255, 255, 0.70) 1px solid } .flex-control-nav li a:hover { background: rgba(255, 255, 255, 1.0) } .flex-control-nav li a.flex-active { cursor: default; background: #66c2d1 } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden } .flex-control-thumbs li { width: 25%; float: left; margin: 0 } .flex-control-thumbs img { width: 100%; display: block; opacity: .7; cursor: pointer } .flex-control-thumbs img:hover { opacity: 1 } .flex-control-thumbs .flex-active { opacity: 1; cursor: default } .flex-control-nav{ } .flex-control-nav, .flex-direction-nav .flex-next, .flex-direction-nav .flex-prev { position: fixed; z-index: 10 } .flexslider { overflow: hidden } .flexslider .slides { zoom: 1; z-index: 1 } .flexslider .slides>li { display: none; position: relative } .bg_image { background-size: cover; height: 100vh; width: auto; background-position: center top; } .flexslider { position: absolute; top: 0; left: 0; width: 100%; } .video-wrap video { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-attachment: fixed; /* 中央揃えになるように、fixed。*/ background-position: center center; /* positionも中央に。*/ background-size: cover; /* 画面サイズに応じてサイズを可変するように設定。*/ /* 以下、画面いっぱいにするためのCSS設定*/ min-height: 100%; min-height: 100vh; min-width: 100%; min-width: 100vw; /* wrapperのサイズに応じて、leftの位置をjQueryで指定するため、positionはabsoluteにします。*/ position: absolute; } .custom-header { position: relative; background-color: #fff; display: flex; flex-wrap: wrap; } .custom-header-media { height: 100vh } .site-content-contain { background-color: #fff; position: relative; z-index: 11 } .navigation { background-color: rgba(255, 255, 255, 0.95); height: 56px; width: 100%; z-index: 999; } .site-content { padding: 0 } .wrap { margin-left: auto; margin-right: auto } .site-branding { z-index: 10; display: block; box-sizing: border-box; position: absolute; width: 98%; width: -webkit-calc(100% - 100px); width: calc(100% - 100px); top: 45%; left: 0; right: 0; margin: auto } .site-branding img{ margin: 0 auto; } .video-wrap { height: 100%; /* 高さを画面いっぱいに指定する。(vhが効かない場合の対策)*/ height: 100vh; /* 高さを画面いっぱいに指定する。*/ position: relative; /* 横幅がウィンドウズサイズの縦幅よりもはみ出てしまう場合に、左にずらすために指定。*/ width: 100%; /* 横幅もいっぱいに。*/ } .btn-next { position: absolute; left: 0; right: 0; bottom: 40px; margin: auto; text-align: center } .btn-next { z-index: 11; text-align: center; position: absolute; bottom: 70px; text-align: center; left: 0; right: 0; margin: auto; } .btn-next a:after { /*content: "\e62d";*/ content: "\e904"; font-family: icomoon; color: #fff; padding-top: 10px } .btn-next a:after{ display: inline-block; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .btn-next a { display: block; font-size: 38px; height: 70px; } .btn-next:hover{ /*bottom: 100px;*/ } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } /*** archive ***/ .archive #body h2 { background: none; } .archive #column{ margin: 0px auto; } .recommend h2 { z-index: 1; } /*** content ***/ .post-middle .category, .post-middle .tag{ margin-top:0.5em!important; width: 100%; } .taxonomies{ display: flex; flex-wrap: wrap; justify-content: flex-start; } .taxonomies .category, .taxonomies .tag{ display: flex; flex-wrap: wrap; } header .taxonomies { display: flex; flex-wrap: wrap; justify-content: flex-start; } header .category, header .tag{ display: flex; } #breadcrumbs ul, #breadcrumbs li{ margin:0; } .widget_popular ul, .widget_popular li{ margin:0; } .widget_recommend ul, .widget_recommend li{ margin:0; } .widget_categories ul.children { margin: 16px 0 0 16px; margin-left: 0rem; } .category > *, .tag > * { /*display: inline-block!important;*/ } #site-content .animated { padding: 0; } body #site-content .recommend { padding: 48px 30px 0; } #site-content .in { padding: 0 20px; } .inbox img{ margin: 0 auto; } #contents .list { display: flex; flex-wrap: wrap; justify-content: space-between; } #contents .list { margin-left: 0; } #contents .list.three > li { margin-left: 0; } /*#site-content{ font-size: 1.4rem; }*/ /* #site-content h1, #site-content h2, #site-content h3, #site-content h4{ font-weight: bold; line-height: 1.6; } */ #site-content .comment-respond p:not(.comment-notes) { max-width: 100%; } #site-content .comments-list, #site-content .comments-list li{ margin-left: 0; list-style: none; } #site-content .comments-list .comment{ padding-left: 0%; } #site-content .comments-wrapper{ margin-top: 0; margin-top: 0; margin-left: 0; margin-right: 0; width: 100%; } #site-content li > ul, #site-content li > ol { margin: 0; } #site-content .comment-reply-link{ color: #222; background-color: #F4F4F4; display: inline-block; padding: 4px 8px; background: #F4F4F4; border-radius: 5px; font-weight: normal; } .cat li { margin: 0; } @media only screen and (max-width: 1024px){ #contents .related_post .list > li { width: 100%!important; } } /*** header ***/ .icon-search:before, .icon-instagram:before, .icon-facebook:before, .icon-twitter:before, .icon-forward:before, .icon-back:before, .icon-cross:before, .icon-home:before, .icon-pinterest:before, .icon-hatena:before, .icon-line:before, .icon-pocket:before{ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body #header{ /*position: relative;*/ } #global{ background-color:#fff; font-size: 14px; } #global li{ line-height: 1; margin: 0; } #global .sns{ margin-bottom: 0; } .logo { margin: 0; /*font-family:'Century Gothic', YuGothic, 'Yu Gothic medium', 'Hiragino Sans', Meiryo, 'sans-serif'*/ } .menu { margin-bottom: 0; margin: 0; } .menu ul{ margin: 0; } .menu li{ font-size: 14px; margin-top: 0; margin-left: 0; list-style: none; } @media only screen and (min-width: 1025px){ .admin-bar #ticker{ /*margin-top: 83px!important;*/ } } @media only screen and (max-width: 1024px){ .main_navi .menu { padding-bottom: 35px; } .admin-bar #ticker{ /*margin-top: 38px!important;*/ } } @media only screen and (max-width: 782px){ .admin-bar #ticker{ /*margin-top: 24px!important;*/ } } @media only screen and (min-width: 1025px){ #ticker { font-size: 14px; } } #ticker p{ margin-bottom:0; } #slide .cat{ margin-left: 0; margin-bottom: 0; } #slide .cat li { margin: 0; margin-bottom: 5px; margin-right: 5px; } #slide .slidetxt p { margin-bottom: 0px; } .slidetxt{ /*font-family:'Century Gothic', YuGothic, 'Yu Gothic medium', 'Hiragino Sans', Meiryo, 'sans-serif';*/ font-size: 14px; box-sizing: unset; -webkit-font-smoothing: unset; } #subslide{ font-size: 14px; } /*** footer ***/ #footer .in .col { flex-basis: auto; flex-grow_sp: unset; padding-right: 0px; padding-left:0px; } #footer .col ul{ margin: 0 0 0rem 0rem; } #footer .col .widget_banner{ display: flex; flex-wrap: wrap; justify-content: center; } .infomation .sns{ margin-bottom: 0; } .footermenu { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 0px; } .footermenu a { color: #000; text-decoration: none; border:none; } .footermenu li { border:none; } .footermenu li li { border:none; /*padding: 10px!important;*/ width: 100%; margin: 0px!important; max-width: 300px; } .footermenu li li:after{ content: '\e904'; font-size: 5px; color: #C9C9C9; font-family: 'icomoon'; position: absolute; right: 5px; top: calc(50% - 7.5px); } .footermenu li a { padding: 10px; width: 100%; } .footermenu >li { border-right: 0 } .footermenu >li:first-child { border-left: 0 } .footermenu > li ul a{ background-color:#f4f4f4;} .footermenu > li ul a:hover { background-color:rgba(255,255,255,0.7);} .footermenu > li ul a:hover::after { color: #FFF;} .footermenu ul { border:none; display:none; background:#fff!important; color: #000; top: auto; position: absolute; top: auto; z-index:5; margin-left: 0px; margin-top: 0px; width:300px; text-align:left; } .footermenu li:hover > ul{ display:block; background: #c2c2c2; } .footermenu ul li { border-bottom: 1px solid #e4e4e4; position: relative; } .footermenu ul ul { position: absolute; top: 0; left:300px; } @media only screen and (max-width: 1024px){ .footermenu ul{ display:none!important; } } /*** footer sp ***/ .home .customize_footer{ opactiy:0; } .customize_footer{ display:none; } @media screen and (max-width: 896px){ .customize_footer{ display:flex; } } /*** comments ***/ .comment-meta .avatar { display: none; } .comments .comments-inner{ margin-left: 0; margin-right: 0; max-width: 100%; } .comment-content p{ margin-left: 0; margin-right: 0; } .parent .even .comment-body{ margin-top: 1em; padding-left: 2em; border-left: 2px solid #E5E5E5; } .comments-wrapper .form-submit{ display: flex; flex-wrap: wrap; justify-content: center; } .comment .comment-meta { padding-left: 0rem; } .comment-footer-meta { justify-content: flex-end; } .comments-wrapper h3, .comments-wrapper .comment-notes{ text-align: left; } .comments_hr{ padding-top:30px; padding-bottom:30px; } .comment-reply-title { line-height: 1.2; margin-bottom: 30px; text-align: left; } .comment-metadata time{ font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; color: #A3A3A3; } .comment-notes{ font-size:1.2rem!important; } @media (min-width: 1220px){ .comment-reply-title { font-size: 1.6rem; } } @media (min-width: 700px){ .comment-reply-title { font-size: 1.6rem; } .comment-author { font-size: 1.6rem; } /* .entry-content { font-size: 1.6rem; } */ } /*** search ***/ .search .widget-content form { pointer-events: unset; } .section-inner .search-form{ position: relative; opacity: 1; z-index: auto; } .search-modal-inner .section-inner{ margin-top: 300px; } /*** widgets ***/ .widget-content { font-size: 1.3rem; } #site-content .cat-item .children{ margin-top: 16px; } .widget_search form { opacity: 1; position: relative; padding: 0; border: none; z-index: auto; top: 0; background: none; } /*** category ***/ #slide [data-cat="cat1"]{ background-color: #EA4698; margin-bottom: 3px!important; margin-right: 3px!important; } [data-cat="cat1"] li a{ background-color: #EA4698; display: inline-flex!important; margin-bottom: 3px; margin-right: 3px; } @media only screen and (max-width: 1024px){ [data-cat="cat1"] li{ width:100%; } } /*** 404 ***/ .error404 #site-content { padding-top: 0!important; } /*** list block ***/ #site-content ol ol{ margin-left: 2em!important; } #site-content ol {list-style-type:none; } /*** comment ***/ .title_reply_main{ font-size: 1.6rem; border-bottom: 1px solid #E5E5E5; margin-bottom: 24px; padding-bottom: 12px; display: block; } /*** Owl Slider , Carousel Slider ***/ .owl_wrapper { overflow: hidden; margin: 10px auto 0; position: relative; min-height: 170px; } .owl-carousel { position: absolute; margin: 0 auto; } .owl-item { overflow: hidden; } .owl-carousel, .owl-carousel .owl-wrapper { position: relative; display: none; } .owl-carousel .owl-wrapper-outer { overflow: hidden; width: 100%; } .owl-carousel .owl-wrapper { position: absolute; display: flex!important; flex-wrap: wrap; justify-content: flex-start; } .owl-carousel .owl-item { justify-content: center; align-items: center; display: flex; } .owl-carousel .owl-item, .owl-carousel .owl-wrapper { line-height: 1em; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-theme .owl-controls .owl-buttons div { display: flex; justify-content: center; align-items: center; width: 47px; height: 47px; background: #FFF; font-size: 1rem; z-index: 100; cursor: pointer; } .owl-theme .owl-controls div { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } .owl-theme .owl-controls .owl-buttons div { background-color: rgb(150 150 150 / 50%); } .owl-prev { left: 0px; text-align: right; } .owl-next { right: 0px; text-align: left; } .owl-next, .owl-prev { position: absolute; top: 0; bottom: 0; margin: auto; height: 20px; width: 80px; } .owl-next::after { content: '\e904'; font-family: 'icomoon' !important; speak: never; -webkit-font-smoothing: antialiased; color: rgb(255, 255, 255); font-size: 16px; text-align: left; } .owl-prev::after { content: '\e901'; font-family: 'icomoon' !important; speak: never; -webkit-font-smoothing: antialiased; color: rgb(255, 255, 255); font-size: 16px; text-align: left; } .owl-theme .owl-controls { margin-top: 10px; text-align: center; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; display: flex; flex-wrap: wrap; justify-content: center; } .owl-pagination { margin-bottom: 15px; } .owl-theme .owl-controls .owl-page { display: inline-block; zoom: 1; } .owl-theme .owl-controls .owl-page span { background: rgba(0, 0, 0, .1); width: 8px; height: 8px; display: block; cursor: pointer; text-indent: -999px; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; margin: 0 5px; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { background: rgba(0, 0, 0, 0.3); } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @keyframes fadeIn { from { opacity: 0;-webkit-transform:translateY(0);transform:translateY(0)} to { opacity: 1;-webkit-transform:translateY(0);transform:translateY(0)}} .fadeIn{ -webkit-animation-name: fadeIn; animation-name:fadeIn; } @keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)} 100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)} } .fadeInUp {-webkit-animation:fadeInUp 0.5s linear forwards; animation:fadeInUp 0.5s linear forwards; } @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)} 100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)} } .fadeInDown {-webkit-animation:fadeInDown 0.5s linear forwards; animation:fadeInDown 0.5s linear forwards; } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } .icon-forward{ font-size: 10px; } .brank{ margin-top: 10%; } div.snsbutton ul.follow_btn{ margin-bottom: 5px; margin-top: 5px; } div.snsbutton ul.share_btn{ margin-bottom: 5px; margin-top: 5px; } @media screen and (min-width:426px){ .widget_isotype_categorywidgetitem .link{ margin-top:1%; } } @media screen and (max-width: 425px){ .widget_isotype_categorywidgetitem .link{ margin-top: 2.5%; } } .follow_card_text{margin-bottom: 0px;} @media screen and (max-width: 1024px){ #contents .list.row_sp > li { display:block; } #contents .list.row_sp > li figure{ width:100%; padding-top:calc(235/385*100%); } #contents .list.row.row_sp { display: block;} #contents .list.row.row_sp > li { position: relative; display: flex; align-items: flex-start; width: auto;} #contents .list.row.row_sp > li figure { width: 30%; padding-top: calc(235 / 385 * 30%);} #contents .list.row.row_sp > li div { flex: 1; display: flex; flex-direction: column; margin-left: 16px;} #contents .list.row.row_sp > li div time { order: -1;} #contents .list.row.row_sp > li .cat li a, #contents .list.three > li .cat li a { padding: 2px 12px;} } #contents .list.big_eye { display: block;} #contents .list.big_eye > li {margin: auto;}