@charset 'UTF-8';
@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
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;border-style:none}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}
 html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
color: #333;
box-sizing: border-box;
line-height: 1;
letter-spacing: 0.05em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "palt";
margin-top: 8.2rem;
}
main.main-contact,main.main-page {
padding-top: 33px;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
color: #333;
text-decoration: none;
transition: 0.6s;
}
a:hover {
opacity: 0.7;
}
li {
list-style: none;
}
@media (max-width:768px) {
body {
font-size: 13px;
margin-top: 5.9rem;
}
main.main-contact,main.main-page {
padding-top: 46px;
}
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
.sec_ttl {
font-size: 60px;
font-family: YuMincho, 'Yu Mincho', serif;
text-align: center;
padding-bottom: 3rem;
margin-bottom: 6rem;
position: relative;
}
.sec_ttl::after {
content: "";
display: block;
width: 200px;
height: 1px;
background: #d14d72;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.sec_ttl span {
font-size: 20px;
padding-top: 2.4rem;
display: block;
}
.txt_flex {
display: flex;
}
.txt_flex time {
padding-right: .5rem;
border-right: 1px solid #333;
}
.txt_flex .category {
padding-left: .5rem;  
}
.blog_item img {
transition: all .8s ease;
}
.blog_item img:hover {
transform: scale(1.05);
}
.blog_ttl {
line-height: 1.7;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.more_btn {
text-align: right;
position: relative;
}
.more_btn a {
display: inline-block;
font-size: 18px;
font-weight: bold;
padding: 0 11.5rem 0 0;
}
.more_btn a:hover {
color: #ffabab;
}
.more_btn a::after {
content: "";
display: block;
width: 100px;
height: 1px;
background: #333;
position: absolute;
top: 50%;
right: 0;
}
.more_btn a:hover::after {
background: #ffabab;
}
ins.adsbygoogle {
margin-bottom: 10rem;
text-align: center;
}
@media (max-width:768px) {
.sec_ttl {
font-size: 40px;
padding-bottom: 2.5rem;
margin-bottom: 5.5rem;
}
.sec_ttl::after {
width: 150px;
}
.sec_ttl span {
font-size: 18px;
padding-top: 2rem;
}
.more_btn a {
font-size: 15px;
padding: 0 6.5rem 0 0;
}
.more_btn a::after {
width: 50px;
}
} .header {
background: #fff;
}
.header_contents {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3rem 0;
}
.header .logo {
text-align: left; font-size: 0px;
}
.header .logo a{
font-size: 14px;
font-family: YuMincho, 'Yu Mincho', serif; 
}
.header .logo a span {
font-size: 30px;
display: block;
padding-top: 1rem;
}
.header_nav .nav_list {
display: flex;
align-items: center;
}
.header_nav .nav_item {
margin-right: 3rem;
}
.header_nav .nav_item a {
font-size: 15px;
font-family: YuMincho, 'Yu Mincho', serif; 
}
.header_nav .nav_item a:hover {
color: #ffabab;
}
.header .tag {
display: none;
}
@media(max-width:768px) {
.header {
border-bottom: 1px solid #dddbdb;
}
.header_contents {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2.5rem 0;
}
.header_nav .nav_list {
display: flex;
align-items: flex-start;
flex-direction: column;
margin-bottom: 4rem;
}
.header_nav .nav_item {
margin-right: 0;
margin-bottom: 1.5rem;
}
.header .tag {
display: block;
}
.header .tag h3 {
font-size: 30px;
font-family: YuMincho, 'Yu Mincho', serif; 
padding-bottom: 1rem;
border-bottom: 1px solid #333;
margin-bottom: 2rem;
} 
.header .tag h3 span {
font-size: 11px;
padding-left: 2rem;
}
} .mv_slider {
background: rgb(255,236,210);
background: linear-gradient(135deg, rgba(255,236,210,1) 0%, rgba(255,201,210,1) 75%);
padding: 10rem 0;
position: relative;
margin: 0 auto 13rem;
}
.slider_item {
margin: 0 3rem 10rem 3rem;
}
.slider_item img {
width: 700px;
height: 467px;
margin-bottom: 2rem;
border-radius: 60px 60px 0 60px;
}
.slider_item .txt_flex {
margin-bottom: 1.5rem;
}
.slider_item .blog_ttl {
font-size: 30px;
font-weight: bold;
}
.mv_slider .scrolldown {
position: absolute;
left: 50%;
bottom: 20px;
height: 50px;
}
.mv_slider .scrolldown span {
color: #333;
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
}
.mv_slider .scrolldown::after {
content: "";
display: block;
width: 1px;
height: 50px;
background: #333;
position: absolute;
top: 0;
animation: scrollAnime 1.4s ease-in-out infinite;
opacity: 0;
}
@keyframes scrollAnime {
0% {
height: 0;
top: 0;
opacity: 0;
}
30% {
height: 50px;
opacity: 1;
}
100% {
height: 0;
top: 60px;
opacity: 0;
}
}
@media (max-width:768px) {
.mv_slider {
padding: 12.5rem 0;
margin: 5rem auto 10rem;
}
.slider_item {
margin: 0 2rem 3rem;
}
.slider_item img {
width: 335px;
height: 223px;
border-radius: 29px 29px 0 29px;
}
.slider_item .txt_flex {
margin-bottom: 1rem;
}
.slider_item .txt_flex time {
font-size: 15px;
}
.slider_item .txt_flex .category {
font-size: 15px;
}
.slider_item .blog_ttl {
font-size: 30px;
}
.mv_slider .scrolldown span {
font-size: 14px;
}
} .latest {
margin-bottom: 15rem;
}
.latest_list {
margin-bottom: 4rem;
}
.big_flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
margin-bottom: 4rem;
}
.big_item {
width: calc((100% - 4rem) / 2);
margin-right: 4rem;
}
.big_item:last-child {
margin-right: 0;
}
.big_item img {
border-radius: 50px 50px 0 50px;
}
.big_item .txt_flex {
margin:2rem 0 1.5rem;
}
.big_item .blog_ttl {
font-size: 22px;
font-weight: bold;
margin-bottom: 2rem;
}
@media (max-width:768px) {
.latest {
margin-bottom: 10rem;
}
.latest_list {
margin-bottom: 3.5rem;
}
.big_flex {
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.big_item {
width: 100%;
margin-right: 0;
margin-bottom: 4rem;
}
.big_item img { border-radius: 29px 29px 0 29px;
}
.big_item .txt_flex {
margin:2rem 0 1.5rem;
}
.big_item .txt_flex time {
padding-right: 1rem;
border-right: 1px solid #333;
}
.big_item .txt_flex .category {
padding-left: 1rem;
}
.big_item .blog_ttl {
font-size: 22px;
font-weight: bold;
margin-bottom: 2rem;
}     
}
.small_flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
.small_item {
width: calc((100% - 6rem) / 3);
margin-right: 3rem;
margin-bottom: 4rem;
}
.small_item:nth-child(3n) {
margin-right: 0;
}
.small_item img {
border-radius: 32px 32px 0 32px;
}
.small_item .txt_flex {
margin: 2rem 0 1rem;
}
.small_item .txt_flex time {
font-size: 14px;
}
.small_item .txt_flex .category {
font-size: 14px;
}
.small_item .blog_ttl {
font-size: 16px;
font-weight: bold;
margin-bottom: 1.5rem;
}
.small_item .tag_name {
font-size: 14px;
display: block;
}
@media (max-width:768px) {
.small_flex {
display: flex;
flex-direction: column;
}
.small_item {
width: 100%;
margin-right: 0;
margin-bottom: 4rem;
}
.item_flex {
display: flex;
align-items: center;
}
.small_item img {
width: 157.5px;
height: 105px;
border-radius: 13.5px 13.5px 0 13.5px;
}
.small_item .txt {
margin-left: 2rem;
}
.small_item .txt_flex {
margin: 0 0 1rem;
}
.small_item .txt_flex time {
font-size: 10px;
}
.small_item .txt_flex .category {
font-size: 10px;
}
.small_item .blog_ttl {
font-size: 13px;
margin-bottom: 1.5rem;
inline-size: 157px;
}
.small_item .tag_name {
font-size: 10px;
}   
} .asp {
margin-bottom: 15rem;
}
.asp .asp_list {
display: flex;
}
.asp .asp_item {
width: calc((100% - 2rem) / 2);
}
.asp .asp_item:first-child {
margin-right: 2rem;
} .series {
margin-bottom: 10rem;
}
.series_list {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8rem;
}
.series_item {
width: calc((100% - 9.9rem) / 4);
margin-right: 3.3rem;
}
.series_item:last-child {
margin-right: 0;
}
.series_item img {
border-radius: 24px 24px 0 24px;
}
.series_item .txt_flex {
margin: 2rem 0 1rem;
}
.series_item time {
font-size: 12px;
padding-right: .5rem;
border-right: 1px solid #333;
}
.series_item .category {
font-size: 12px;
padding-left: .5rem;
}
.series_item .blog_ttl {
font-weight: bold;
margin-bottom: 1.5rem;
}
.series_item .tag_name {
font-size: 12px;
}
@media (max-width:768px) {
.series_list {
flex-wrap: wrap;
margin-bottom: 3rem;
}
.series_item {
width: calc((100% - 2rem) / 2);
margin-right: 2rem;
margin-bottom: 3rem;
}
.series_item:nth-child(2n) {
margin-right: 0;
}
.series_item img {
width: 275px;
height: 105px;
border-radius: 13.5px 13.5px 0 13.5px;
}
.series_item time {
font-size: 10px;
}
.series_item .category {
font-size: 10px;
padding-left: 1rem;
}
.series_item .tag_name {
font-size: 10px;
}
} .cat_tag_contents {
display: flex;
justify-content: center;
margin-bottom: 10rem;
}
.cat_tag_contents h3 {
font-size: 30px;
font-family: YuMincho, 'Yu Mincho', serif;
font-weight: bold;
padding-bottom: 1rem;
margin-bottom: 2.5rem;
border-bottom: 1px solid #333;
}
.cat_tag_contents h3 span {
font-size: 14px;
padding-left: 2rem;
}
.cat {
width: 50%;
margin-right: 4rem;
}
.cat_list {
display: flex;
flex-wrap: wrap;
}
.cat_item {
margin-right: 1.5rem;
margin-bottom: 1.5rem;
}
.cat_item a {
color: #fff;
font-size: 14px;
font-weight: bold;
padding: 1rem 2rem;
border-radius: 8px 8px 0 8px;
background: #ffabab;
display: inline-block;
}
.tag {
width: 50%;
}
.tag_list {
display: flex;
flex-wrap: wrap;
}
.tag_item {
margin-right: 1.5rem;
margin-bottom: 1.5rem;
}
.tag_item a {
color: #fff;
font-size: 14px;
font-weight: bold;
padding: 1rem 2rem;
border-radius: 8px 8px 0 8px;
background: #ffabab;
display: inline-block;
}
@media (max-width:768px) {
.cat_tag_contents {
display: flex;
flex-direction: column;
margin-bottom: 10rem;
}
.cat_tag_contents h3 {
margin-bottom: 2rem;
}
.cat_tag_contents h3 span {
font-size: 11px;
}
.cat {
width: 100%;
margin-right: 0;
margin-bottom: 4rem;
}
.cat_item {
padding: .5rem 1.2rem;
border-radius: 6px 6px 0 6px;
margin-right: 1.2rem;
margin-bottom: 1rem;
}
.cat_item a {
font-size: 11px;
}
.tag {
width: 100%;
}
.tag_item {
padding: .5rem 1.2rem;
border-radius: 6px 6px 0 6px;
margin-right: 1.2rem;
margin-bottom: 1rem;
}
.tag_item a {
font-size: 11px;
}
} .x_embed {
margin-bottom: 13.5rem;
}
.x_wrapper {
max-width: 600px;
margin: 0 auto;
}
@media(max-width:768px) {
.x_embed {
margin-bottom: 10rem;
}
} .crumb {
margin-bottom: 3rem;
}
.crumb_list {
display: flex;
flex-wrap: wrap;
}
.crumb a span {
font-size: 14px;
color: #ffabab;
margin-right: 1.5rem;
}
.crumb .current-item {
font-size: 14px;
color: #333; 
margin-left: 1.5rem;
}
@media (max-width:768px) {
.crumb {
margin-bottom: 3.5rem;
}
.crumb .wrapper {
line-height: 1.7;
}
.crumb a span {
font-size: 13px;
margin-right: 1.2rem;
}
.crumb .current-item {
font-size: 13px;
margin-right: 1.2rem;
}
} .footer {
padding: 4rem 0 2rem;
background: rgb(255,236,210);
background: linear-gradient(135deg, rgba(255,236,210,1) 0%, rgba(255,201,210,1) 75%);
text-align: center;
}
.footer .logo {
margin-bottom: 5rem;
}
.footer .logo a{
font-size: 14px;
font-family: YuMincho, 'Yu Mincho', serif; 
}
.footer .logo a span {
font-size: 30px;
display: block;
padding-top: 1rem;
}
.footer_nav .nav_list {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8rem;
}
.footer_nav .nav_item {
margin-right: 3rem;
}
.footer_nav .nav_item a {
font-size: 14px;
font-family: YuMincho, 'Yu Mincho', serif; 
}
.footer small {
font-size: 10px;
}
@media (max-width:768px) {
.footer_nav .nav_list {
display: flex;
flex-direction: column;
margin-bottom: 7rem;
}
.footer_nav .nav_item {
margin-right: 0;
margin-bottom: 1.2rem;
}    
} .header, .latest, .series, .cat_tag, .mw_wp_form, .google_ads, .x_embed, .footer {
padding-right: 2%;
padding-left: 2%;
}
@media (max-width:768px) {
.header, .latest, .series, .cat_tag, .mw_wp_form, .google_ads, .x_embed, .footer {
padding-right: 2rem;
padding-left: 2rem;
}   
.header_nav {
padding-right: 2rem;
padding-left: 2rem;
}  
}
 .loading{
display: none;
} .mv {
width: 100%;
height: 100vh;
position: relative;
}
.mv .wrapper {
position: absolute;
width: 100%;
height: 100%;
margin: 0 100px;
}
.mv .mv_txt {
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
}
.mv .mv_txt .mv_copy {
font-size: 56px;
line-height: 1.5;
margin-bottom: 2rem;
}
.mv .mv_txt .mv_sub {
font-size: 18px;
line-height: 2;
}
.mv .scrolldown {
position: absolute;
left: 50%;
bottom: 20px;
height: 50px;
}
.mv .scrolldown span {
color: #3B3C3B;
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
}
.mv .scrolldown::after {
content: "";
display: block;
width: 1px;
height: 50px;
background: #3B3C3B;
position: absolute;
top: 0;
animation: scrollAnime 1.4s ease-in-out infinite;
opacity: 0;
}
@keyframes scrollAnime {
0% {
height: 0;
top: 0;
opacity: 0;
}
30% {
height: 50px;
opacity: 1;
}
100% {
height: 0;
top: 60px;
opacity: 0;
}
}
@media (max-width:768px) {
.mv .scrolldown span {
font-size: 14px;
}
} .works {
padding: 12rem 0;
background: #fff;
} .latest {
margin-bottom: 15rem;
}
.latest_list {
margin-bottom: 4rem;
}
.big_flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
margin-bottom: 4rem;
}
.big_item {
width: calc((100% - 4rem) / 2);
margin-right: 4rem;
}
.big_item:last-child {
margin-right: 0;
}
.big_item img {
border-radius: 50px 50px 0 50px;
}
.big_item .txt_flex {
margin:2rem 0 1.5rem;
}
.big_item .blog_ttl {
font-size: 22px;
font-weight: bold;
margin-bottom: 2rem;
}
@media (max-width:768px) {
.latest {
margin-bottom: 10rem;
}
.latest_list {
margin-bottom: 3.5rem;
}
.big_flex {
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.big_item {
width: 100%;
margin-right: 0;
margin-bottom: 4rem;
}
.big_item img { border-radius: 29px 29px 0 29px;
}
.big_item .txt_flex {
margin:2rem 0 1.5rem;
}
.big_item .txt_flex time {
padding-right: 1rem;
border-right: 1px solid #3B3C3B;
}
.big_item .txt_flex .category {
padding-left: 1rem;
}
.big_item .blog_ttl {
font-size: 22px;
font-weight: bold;
margin-bottom: 2rem;
}     
}
.small_flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
.small_item {
width: calc((100% - 6rem) / 3);
margin-right: 3rem;
margin-bottom: 4rem;
}
.small_item:nth-child(3n) {
margin-right: 0;
}
.small_item img {
border-radius: 32px 32px 0 32px;
}
.small_item .txt_flex {
margin: 2rem 0 1rem;
}
.small_item .txt_flex time {
font-size: 14px;
}
.small_item .txt_flex .category {
font-size: 14px;
}
.small_item .blog_ttl {
font-size: 16px;
font-weight: bold;
margin-bottom: 1.5rem;
}
.small_item .tag_name {
font-size: 14px;
display: block;
}
@media (max-width:768px) {
.small_flex {
display: flex;
flex-direction: column;
}
.small_item {
width: 100%;
margin-right: 0;
margin-bottom: 4rem;
}
.item_flex {
display: flex;
align-items: center;
}
.small_item img {
width: 157.5px;
height: 105px;
border-radius: 13.5px 13.5px 0 13.5px;
}
.small_item .txt {
margin-left: 2rem;
}
.small_item .txt_flex {
margin: 0 0 1rem;
}
.small_item .txt_flex time {
font-size: 10px;
}
.small_item .txt_flex .category {
font-size: 10px;
}
.small_item .blog_ttl {
font-size: 13px;
margin-bottom: 1.5rem;
inline-size: 157px;
}
.small_item .tag_name {
font-size: 10px;
}   
} .asp {
margin-bottom: 15rem;
}
.asp .asp_list {
display: flex;
}
.asp .asp_item {
width: calc((100% - 2rem) / 2);
}
.asp .asp_item:first-child {
margin-right: 2rem;
} .series {
margin-bottom: 10rem;
}
.series_list {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8rem;
}
.series_item {
width: calc((100% - 9.9rem) / 4);
margin-right: 3.3rem;
}
.series_item:last-child {
margin-right: 0;
}
.series_item img {
border-radius: 24px 24px 0 24px;
}
.series_item .txt_flex {
margin: 2rem 0 1rem;
}
.series_item time {
font-size: 12px;
padding-right: .5rem;
border-right: 1px solid #3B3C3B;
}
.series_item .category {
font-size: 12px;
padding-left: .5rem;
}
.series_item .blog_ttl {
font-weight: bold;
margin-bottom: 1.5rem;
}
.series_item .tag_name {
font-size: 12px;
}
@media (max-width:768px) {
.series_list {
flex-wrap: wrap;
margin-bottom: 3rem;
}
.series_item {
width: calc((100% - 2rem) / 2);
margin-right: 2rem;
margin-bottom: 3rem;
}
.series_item:nth-child(2n) {
margin-right: 0;
}
.series_item img {
width: 275px;
height: 105px;
border-radius: 13.5px 13.5px 0 13.5px;
}
.series_item time {
font-size: 10px;
}
.series_item .category {
font-size: 10px;
padding-left: 1rem;
}
.series_item .tag_name {
font-size: 10px;
}
} .cat_tag_contents {
display: flex;
justify-content: center;
margin-bottom: 10rem;
}
.cat_tag_contents h3 {
font-size: 30px;
font-family: YuMincho, 'Yu Mincho', serif;
font-weight: bold;
padding-bottom: 1rem;
margin-bottom: 2.5rem;
border-bottom: 1px solid #3B3C3B;
}
.cat_tag_contents h3 span {
font-size: 14px;
padding-left: 2rem;
}
.cat {
width: 50%;
margin-right: 4rem;
}
.cat_list {
display: flex;
flex-wrap: wrap;
}
.cat_item {
margin-right: 1.5rem;
margin-bottom: 1.5rem;
}
.cat_item a {
color: #fff;
font-size: 14px;
font-weight: bold;
padding: 1rem 2rem;
border-radius: 8px 8px 0 8px;
background: #ffabab;
display: inline-block;
}
.tag {
width: 50%;
}
.tag_list {
display: flex;
flex-wrap: wrap;
}
.tag_item {
margin-right: 1.5rem;
margin-bottom: 1.5rem;
}
.tag_item a {
color: #fff;
font-size: 14px;
font-weight: bold;
padding: 1rem 2rem;
border-radius: 8px 8px 0 8px;
background: #ffabab;
display: inline-block;
}
@media (max-width:768px) {
.cat_tag_contents {
display: flex;
flex-direction: column;
margin-bottom: 10rem;
}
.cat_tag_contents h3 {
margin-bottom: 2rem;
}
.cat_tag_contents h3 span {
font-size: 11px;
}
.cat {
width: 100%;
margin-right: 0;
margin-bottom: 4rem;
}
.cat_item {
padding: .5rem 1.2rem;
border-radius: 6px 6px 0 6px;
margin-right: 1.2rem;
margin-bottom: 1rem;
}
.cat_item a {
font-size: 11px;
}
.tag {
width: 100%;
}
.tag_item {
padding: .5rem 1.2rem;
border-radius: 6px 6px 0 6px;
margin-right: 1.2rem;
margin-bottom: 1rem;
}
.tag_item a {
font-size: 11px;
}
} .x_embed {
margin-bottom: 13.5rem;
}
.x_wrapper {
max-width: 600px;
margin: 0 auto;
}
@media(max-width:768px) {
.x_embed {
margin-bottom: 10rem;
}
} .crumb {
margin-bottom: 3rem;
}
.crumb_list {
display: flex;
flex-wrap: wrap;
}
.crumb a span {
font-size: 14px;
color: #ffabab;
margin-right: 1.5rem;
}
.crumb .current-item {
font-size: 14px;
color: #3B3C3B; 
margin-left: 1.5rem;
}
@media (max-width:768px) {
.crumb {
margin-bottom: 3.5rem;
}
.crumb .wrapper {
line-height: 1.7;
}
.crumb a span {
font-size: 13px;
margin-right: 1.2rem;
}
.crumb .current-item {
font-size: 13px;
margin-right: 1.2rem;
}
}

.allStory {
margin-bottom: 15rem;
}
.allStory .sec_ttl {
background: rgb(255,236,210);
background: linear-gradient(135deg, rgba(255,236,210,1) 0%, rgba(255,201,210,1) 75%);
padding: 4rem 0;
}
.allStory .sec_ttl::after {
display: none;
}
.archive_ttl {
text-align: left;
font-weight: bold;
margin-bottom: 5rem;
}
.archive_ttl h3 {
font-size: 22px;
}
.two_column {
display: flex;
}
@media (max-width:834px) {
.allStory {
margin-bottom: 10rem;
}
.two_column {
flex-direction: column;
}
} .left_side {
padding-right: 6rem;
width: 75%;
}
.left_contents {
display: flex;
flex-wrap: wrap;
}
.storyList_item {
width: calc((100% - 3rem) / 2);
margin-right: 3rem;
margin-bottom: 4rem;
}
.storyList_item:nth-child(2n) {
margin-right: 0;
}
.storyList_item img {
border-radius: 34px 34px 0 34px;
}
.storyList_item .txt_flex {
margin: 2rem 0 1.5rem;
}
.storyList_item .txt_flex time {
font-size: 14px;
}
.storyList_item .txt_flex .category {
font-size: 14px;
padding-left: .5rem;
}
.storyList_item .blog_ttl {
font-weight: bold;
margin-bottom: 2rem;
}
.wp-pagenavi {
margin-top: 6rem;
text-align: center;
}
.pagination .wp-pagenavi span.current {
display: inline-block;
width: 50px;
height: 50px;
background: #ffabab;
color: #fff;
line-height: 50px;
border-radius: 5px;
margin: 0 0.5rem;
}
.pagination .wp-pagenavi a.page {
display: inline-block;
width: 50px;
height: 50px;
background: #fff;
color: #ffabab;
line-height: 50px;
border-radius: 5px;
border: 1px solid #ffabab;
margin: 0 0.5rem;
}
.storyList_item .tag_name {
font-size: 14px;
}
@media (max-width:834px) {
.left_side {
margin-bottom: 10rem;
width: 100%;
padding-right: 0;
}
.storyList_item .txt_flex {
margin: 2rem 0 1rem;
}
.storyList_item .txt_flex time {
font-size: 10px;
}
.storyList_item .txt_flex .category {
font-size: 10px;
}
.storyList_item .blog_ttl {
font-size: 20px;
margin-bottom: 1.5rem;
}
.wp-pagenavi {
margin-top: 4rem;
}
.pagination .wp-pagenavi span.current {
width: 35px;
height: 35px;
line-height: 35px;
font-size: 15px;
}
.pagination .wp-pagenavi a.page {
width: 35px;
height: 35px;
line-height: 35px;
font-size: 15px;
}
.storyList_item .tag_name {
font-size: 10px;
}
}
@media(max-width:430px) {
.left_contents {
flex-direction: column;
}
.storyList_item {
width: 100%;
margin-right: 0;
}
.storyList_item img {
border-radius: 29px 29px 0 29px;
}
} .favorites-list{
display: flex;
flex-wrap: wrap;
}
.favorites-list li {
border: none!important;
width: calc((100% - 3rem) / 2);
margin-right: 3rem!important;
margin-bottom: 4rem!important;
}
.favorites-list li:nth-child(2n) {
margin-right: 0!important;
}
.favorites-list img {
border-radius: 34px 34px 0 34px;
}
.favorites-list li a{
line-height: 1.7;
font-size: 16px;
font-weight: bold;
display: inline-block;
margin: 2rem 0;
}
@media(max-width:834px) {
.favorites-list li a {
font-size: 20px;
}
}
@media(max-width:430px) {
.favorites-list{
flex-direction: column;
}
.favorites-list li {
width: 100%;
margin-right: 0!important;
}
.favorites-list img {
border-radius: 29px 29px 0 29px;
}
.favorites-list li a{
font-size: 16px;
}
} .sec_ttl, .list_contents, .crumb {
padding-right: 2%;
padding-left: 2%;
}
@media (max-width:768px) {
.sec_ttl, .list_contents, .crumb {
padding-right: 2rem;
padding-left: 2rem;
}   
}.right_contents {
width: calc(100% - 75%);
}
.right_contents h3 {
color: #333;
font-weight: bold;
font-size: 22px;
font-family: YuMincho, 'Yu Mincho', serif; 
margin-bottom: 2.5rem;
}
.right_contents h3 span {
font-size: 12px;
padding-left: 1.5rem;
}
.right_contents .cat {
margin-bottom: 6rem;
margin-right: 0;
width: 100%;
}
.right_contents .cat h3 {
padding-bottom: 1rem;
border-bottom: 1px solid #333;
}
.right_contents .tag {
margin-bottom: 6rem;
margin-right: 0;
width: 100%;
}
.right_contents .tag h3 {
padding-bottom: 1rem;
border-bottom: 1px solid #333;
}
.pickup_item {
padding-bottom: 3rem;
border-bottom: 1px solid #ffabab;
margin-bottom: 3rem;
}
.pickup_flex {
display: flex;
}
.pickup_item .thumbnail {
width: 40%;
}
.pickup_item img {
border-radius: 8px 8px 0 8px;
}
.pickup_item .txt {
margin-left: 2rem;
width: 60%;
}
.pickup_item .txt_flex time {
font-size: 12px;
}
.pickup_item .txt_flex .category {
font-size: 12px;
padding-left: .5rem;
}
.pickup_item .blog_ttl{
font-size: 14px;
font-weight: bold;
display: inline-block;
padding-top: 1.5rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (max-width:834px) {
.right_contents {
width: 100%;
margin-bottom: 10rem;
}
.right_contents h3 {
font-size: 30px;
}
.right_contents h3 span {
font-size: 11px;
padding-left: 2rem;
}
.pickup_item .thumbnail {
width: 50%;
}
.pickup_item .txt {
width: 50%;
}
.right_contents .cat {
margin-bottom: 4rem;
}
.right_contents .tag {
margin-bottom: 4rem;
}
.pickup_item .txt_flex time {
font-size: 10px;
}
.pickup_item .txt_flex .category {
font-size: 10px;
}
.pickup_item .blog_ttl{
font-size: 15px;
padding-top: 1rem;
}
}

.article_contents {
margin-top: 13rem;
}
@media(max-width:768px) {
.article_contents {
margin-top: 10.3rem;
}
} .article {
width: 75%;
margin-right: 6rem;
}
.ttl_flex {
margin-bottom: 2rem;
}
.ttl_flex time {
font-size: 14px;
}
.ttl_flex .category {
font-size: 14px;
}
.article_ttl {
font-size: 40px;
font-weight: bold;
line-height: 1.5;
margin-bottom: 5rem;
}
.attachment-page_eyecatch {
margin-bottom: 6rem;
} 
.intro {
margin:5rem 0 6rem;
}
.article div#ez-toc-container {
border: 1px solid #ffabab;
width: 70%;
padding: 6.5rem 4rem 4rem;
margin: 0 auto 6rem !important;
}
.article .ez-toc-title-container {
text-align: center;
margin-bottom: 3rem;
font-size: 12px;
}
.article .ez-toc-counter nav ul li a::before {
content: counter(item, decimal-leading-zero);
color: #ffabab;
margin-right: 1.5rem;
}
.article .ez-toc-title {
padding-top: 1rem;
line-height: 1;
}
.article .ez-toc-title::before {
content: "Table of Contents";
display: block;
font-size: 20px;
position: absolute;
top: 36px;
left: 50%;
transform: translateX(-50%);
}
.article .ez-toc-list li {
margin-bottom: 2rem;
}
.article  .ez-toc-list li:last-child {
margin-right: 0;
}
.article .ez-toc-list li  a {
font-size: 15px;
}
.article .ez-toc-list a.ez-toc-link {
padding: 0 0 2rem 0;
}
.article .ez-toc-list li a span {
color: #ffabab;
padding-right: 1.5rem;
} 
.wp-block-group:last-child {
margin-bottom: 10rem;
}
.wp-block-group p {
line-height: 2;
margin-bottom: 1.6rem;
}
.article h2 {
font-size: 22px;
font-weight: bold;
padding-bottom: 2rem;
border-bottom: 2px solid #d14d72;
margin: 8rem 0 4rem;
position: relative;
}
.article h2::before {
content: "";
display: block;
width: 10%;
height: 2px;
background: #ffedd4;
position: absolute;
top: 42px;
left: 0;
}
.article figure.wp-block-image {
margin-bottom: 5rem;
}
.wp-block-group.is-layout-flex > figure.wp-block-image {
margin-bottom: 0;
}
.article figure img {
width: 840px;
height: auto;
}
.article .is-layout-flex figure {
width: 50%;
}
.article .wp-element-caption {
font-size: 12px;
color: #a3a3a3;
}
.article .kokohana_video {
width: 100%;
aspect-ratio: 16/9;
}
.article .kokohana_video iframe {
width: 100%;
height: 100%;
}
.article h3 {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
margin: 3.2rem 0 2.4rem;
color: #d14d72;
position: relative;
padding-left: 18px;
}
.article h3::before {
content: "";
display: inline-block;
background: #d14d72;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.article .page_link a {
color: #4d89d1;
text-decoration: underline;
}
.article ul,
.article ol {
margin-bottom: 3rem;
}
.article .list_disc li {
padding-bottom: 1.2rem;
padding-left: 2rem;
line-height: 1.6;
position: relative;
}
.article .list_disc li::after {
content: "";
display: inline-block;
width: 5px;
height: 5px;
background: #333;
border-radius: 50%;
position: absolute;
top: 25%;
left: 8px;
}
.article .list_number li {
list-style: decimal inside;
padding-bottom: 1.2rem;
padding-left: 2rem;
}
.article blockquote {
position: relative;
padding: 40px 30px 15px;
box-sizing: border-box;
background: #f3f3f3;
}
.article blockquote:before {
display: inline-block;
position: absolute;
top: -8px;
left: 9px;
width: 40px;
height: 30px;
text-align: center;
content: "\f10d";
font-family: "Font Awesome 5 Free";
color: #FFF;
font-size: 18px;
line-height: 30px;
background: #d14d72;
font-weight: 900;
}
.article blockquote:after{
position: absolute;
content: '';
top: -8px;
left: 49px;
border: none;
border-bottom: solid 8px #d14d72;
border-right: solid 9px transparent;
}
.article blockquote p {
position: relative;
padding: 0;
margin: 10px 0;
z-index: 3;
line-height: 1.7;
}
.article blockquote cite a {
display: block;
text-align: right;
color: #888;
}
.article .wp-block-kevinbatdorf-code-block-pro  {
margin-bottom: 2.4rem;
}
.wp-block-group .important {
font-weight: bold;
}
.back_btn {
text-align: left;
margin:5rem 0 8rem;
}
.back_btn a {
display: inline-block;
font-size: 18px;
font-weight: bold;
padding-left: 11.5rem;
position: relative;
}
.back_btn a:hover {
color: #ffabab;
}
.back_btn a::after {
content: "";
display: block;
background: #333;
width: 100px;
height: 1px;
position: absolute;
top: 70%;
left: 0;
}
.back_btn a:hover::after {
background: #ffabab;
}
.article .more_btn {
margin-bottom: 5rem;
}
.share_buttons {
margin-bottom: 10rem;
}
.share_buttons p{
text-align: center;
margin-bottom: 3rem;
font-size: 20px;
font-weight: bold;
}
.button_list {
display: flex;
justify-content: center;
}
.share_buttons .button_item {
max-width: 30px;
margin-right: 3rem;
}
.share_buttons .button_item:last-child {
margin-right: 0;
}
@media (max-width:834px) {
.article {
width: 100%;
padding-right: 0;
margin-right: 0;
}
.article img {
max-width: 100%;
height: auto;
}
.ttl_flex time {
font-size: 14px;
}
.ttl_flex .category {
font-size: 14px;
}
.article_ttl {
font-size: 30px;
margin-bottom: 3rem;
}
.intro  {
margin-top: 4rem;
}
.article div#ez-toc-container  {
width: 100%;
padding: 5.45rem 2rem 3rem;
}
.article .ez-toc-title-container {
font-size: 18px;
}
.article .ez-toc-title-container span {
font-size: 10px;
}
.article .ez-toc-list li {
margin-bottom: 1.5rem;
}
.article .ez-toc-list li a {
font-size: 14px;
}
.article .ez-toc-list li a span {
padding-right: 1rem;
} 
.article div#ez-toc-container p.ez-toc-title {
font-size: 10px;
}
.article .ez-toc-title::before {
font-size: 18px;
top: 24px;
}
.article .ez-toc-list a.ez-toc-link {
padding: 0 0 1.5rem 0;
}
.wp-block-group:last-child {
margin-bottom: 8rem;
}
.article h2 {
font-size: 20px;
margin: 8rem 0 2.4rem;
}
.article h2::before {
top: 40px;
}
.article h3 {
font-size: 18px;
padding-left: 16px;
margin: 2.4rem 0 1.6rem;
}
.article h3::before {
width: 8px;
height: 8px;
top: 16px;
}
.wp-block-group p {
font-size: 14px;
}
.article ul,
.article ol {
margin-bottom: 1.6rem;
}
.article figure img {
max-width: 100%;
height: auto;
margin-bottom: 2rem;
}
.article .list_disc li::after {
width: 3px;
height: 3px;    
}
.article .list_number li {
line-height: 1.6;
}
.article .recommend {
width: 100% !important;    }
.back_btn {
margin:4rem 0 8rem;
}
.back_btn a {
font-size: 15px;
padding-left: 8.5rem;
}
.back_btn a:after {
width: 50px;
}
} .related {
width: 100%;
margin-bottom: 15rem;
}
.related h3 {
color: #333;
font-size: 30px;
font-family: YuMincho, 'Yu Mincho', serif;
font-weight: bold;
padding-bottom: 1rem;
margin-bottom: 2.5rem;
border-bottom: 1px solid #333;
}
.related h3::before {
display: none;
}
.related h3 span {
font-size: 14px;
padding-left: 2rem;
}
.related_list {
display: flex;
align-items: center;
margin-bottom: 8rem;
}
.related_item {
width: calc((100% - 9.9rem) / 4);
margin-right: 3.3rem;
}
.related_item:last-child {
margin-right: 0;
}
.related_item img {
border-radius: 24px 24px 0 24px;
}
.related_item .txt_flex {
margin: 2rem 0 1rem;
}
.related_item time {
font-size: 12px;
padding-right: 1rem;
border-right: 1px solid #333;
}
.related_item .category {
font-size: 12px;
padding-left: 1rem;
}
.related_item .blog_ttl {
font-weight: bold;
margin-bottom: 1.5rem;
}
@media (max-width:768px) {
.article .related {
margin-bottom: 9rem;
}
.article .related h3 {
margin-bottom: 2rem;
}
.article .related h3 span {
font-size: 11px;
} 
.related_list {
flex-wrap: wrap;
margin-bottom: 3rem;
}
.related_item {
width: calc((100% - 2rem) / 2);
margin-right: 2rem;
margin-bottom: 3rem;
}
.related_item:nth-child(2n) {
margin-right: 0;
}
.related_item img {
width: 275px;
height: 105px;
border-radius: 13.5px 13.5px 0 13.5px;
}
.related_item time {
font-size: 10px;
}
.related_item .category {
font-size: 10px;
padding-left: 1rem;
}
} @media (max-width:768px) {
.crumb_item {
padding-bottom: 1.5rem; 
}
.crumb_item:last-child {
padding-bottom: 0;
}
} .article_contents {
padding-right: 2%;
padding-left: 2%;
}
@media (max-width:768px) {
.article_contents {
padding-right: 2rem;
padding-left: 2rem;
}
}.contact .sec_ttl {
background: rgb(255,236,210);
background: linear-gradient(135deg, rgba(255,236,210,1) 0%, rgba(255,201,210,1) 75%);
padding: 4rem 0;
}
.contact .sec_ttl::after {
display: none;
}
.mw_wp_form {
max-width: 800px;
margin: 0 auto 15rem;
}
.mw_wp_form h3 {
font-size: 22px;
margin-bottom: 5rem;
}
.mw_wp_form p {
line-height: 1.7;
font-size: 15px;
}
.mw_wp_form p:first-child {
margin-bottom: 5rem;
}
.mw_wp_form input, .mw_wp_form textarea {
padding: 0.7rem;
}  
.name, .email, .question {
margin: 1.2rem 0 3.5rem;
width: 100%;
border: 1px solid #333;
border-radius: 3px;
}
.mw_wp_form .contact_btns {
display: flex;
justify-content: center;
margin-top: 3.5rem;
}
.mw_wp_form .contact_btns input {
padding: 1.5rem 6rem;
background: #ffabab;
color: #fff;
border-radius: 8px 8px 0 8px;
display: block;
font-weight: bold;
}
.mw_wp_form .contact_buck {
border: #ffabab;
color: #ffabab;
margin-right: 2rem;
}
@media(max-width:430px) {
.mw_wp_form {
margin: 0 auto 10rem;
}
}.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left; min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
 .slick-loading .slick-list
{
background: #fff url(//takai-ayaka.com/wp-content/themes/Ayaka%20Takai%202026/images/ajax-loader.gif) center center no-repeat;
} @font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url(https://takai-ayaka.com/wp-content/themes/Ayaka%20Takai%202026/css/fonts/slick.eot);
src: url(https://takai-ayaka.com/wp-content/themes/Ayaka%20Takai%202026/css/fonts/slick.eot?#iefix) format('embedded-opentype'), url(https://takai-ayaka.com/wp-content/themes/Ayaka%20Takai%202026/css/fonts/slick.woff) format('woff'), url(https://takai-ayaka.com/wp-content/themes/Ayaka%20Takai%202026/css/fonts/slick.ttf) format('truetype'), url(https://takai-ayaka.com/wp-content/themes/Ayaka%20Takai%202026/css/fonts/slick.svg#slick) format('svg');
} .slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
} .slick-dotted.slick-slider
{ margin-bottom: 5rem;
}
.slick-dots
{
position: absolute; bottom: -10px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block; width: 10px;
height: 10px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block; width: 10px;
height: 10px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px; line-height: 10px;
position: absolute;
top: 0;
left: 0; width: 10px;
height: 10px;
content: '•';
text-align: center;  color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{  color: #262626;
}
@media (max-width:768px) {
.slick-dots li button:before {
width: 8px;
height: 8px;
}
}.drawer-open {
overflow: hidden !important;
}
.drawer-nav {
position: fixed;
z-index: 101;
top: 0;
overflow: hidden;
width: 16.25rem;
height: 100%;
color: #222;
background-color: #fff;
} .drawer-menu {
margin: 0;
padding: 0;
list-style: none;
}
.drawer-menu-item { display: block; text-decoration: none; }  .drawer-overlay {
position: fixed;
z-index: 100;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .2);
}
.drawer-open .drawer-overlay {
display: block;
} .drawer--top .drawer-nav {
top: -100%;
left: 0;
width: 100%; height: 100vh;
max-height: 100%; -webkit-transition: top 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: top 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.drawer--top.drawer-open .drawer-nav { top: 105px;
}
.drawer--top .drawer-hamburger,
.drawer--top.drawer-open .drawer-hamburger {
right: 0;
} .drawer--left .drawer-nav {
left: -16.25rem;
-webkit-transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
left: 0;
}
.drawer--left.drawer-open .drawer-hamburger {
left: 16.25rem;
} .drawer--right .drawer-nav {
right: -16.25rem;
-webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
right: 0;
}
.drawer--right.drawer-open .drawer-hamburger {
right: 16.25rem;
} .drawer-hamburger {
position: fixed;
z-index: 104;
top: 0;
display: block;
box-sizing: content-box; width: 28px;
padding: 0; padding-top: 4rem; padding-right: 2rem; padding-bottom: 4.5rem;
padding-left: .75rem;
-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
border: 0;
outline: 0;
background-color: transparent;
}
.drawer-hamburger:hover {
cursor: pointer;
background-color: transparent;
}
.drawer-hamburger-icon {
position: relative;
display: block;
margin-top: 10px;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
width: 100%;
height: 2px;
-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
background-color: #333;
}
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
position: absolute;
top: 0px;
left: 0;
content: ' ';
}
.drawer-hamburger-icon:after { top: 8px;
}
.drawer-open .drawer-hamburger-icon {
background-color: transparent;
}
.drawer-open .drawer-hamburger-icon:before,
.drawer-open .drawer-hamburger-icon:after {
top: 0;
}
.drawer-open .drawer-hamburger-icon:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.drawer-open .drawer-hamburger-icon:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}  .sr-only {
position: absolute;
overflow: hidden;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
} .sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
margin: 0;
} .drawer--sidebar {
background-color: #fff;
}
.drawer--sidebar .drawer-contents {
background-color: #fff;
}
@media (min-width: 64em) {
.drawer--sidebar .drawer-hamburger {
display: none;
visibility: hidden;
}
.drawer--sidebar .drawer-nav {
display: block;
-webkit-transform: none;
transform: none;
position: fixed;
width: 12.5rem;
height: 100%;
} .drawer--sidebar.drawer--left .drawer-nav {
left: 0;
border-right: 1px solid #ddd;
}
.drawer--sidebar.drawer--left .drawer-contents {
margin-left: 12.5rem;
} .drawer--sidebar.drawer--right .drawer-nav {
right: 0;
border-left: 1px solid #ddd;
}
.drawer--sidebar.drawer--right .drawer-contents {
margin-right: 12.5rem;
} .drawer--sidebar .drawer-container {
max-width: 48rem;
}
}
@media (min-width: 75em) {
.drawer--sidebar .drawer-nav {
width: 16.25rem;
}
.drawer--sidebar.drawer--left .drawer-contents {
margin-left: 16.25rem;
}
.drawer--sidebar.drawer--right .drawer-contents {
margin-right: 16.25rem;
} .drawer--sidebar .drawer-container {
max-width: 60rem;
}
}   .drawer-navbar {
z-index: 102;
top: 0;
width: 100%;
} .drawer-navbar--fixed {
position: fixed;
}
.drawer-navbar-header {
position: relative;
z-index: 102;
box-sizing: border-box;
width: 100%; padding: 0 .75rem;
text-align: center;
} .drawer-navbar .drawer-brand:hover {
background-color: transparent;
}
.drawer-navbar .drawer-nav {
padding-top: 3.75rem;
} @media (min-width: 769px) { .drawer-navbar .drawer-navbar-header {
position: relative;
display: block;
float: left;
width: auto;
padding: 0;
border: 0;
}
.drawer-navbar .drawer-menu--right {
float: right;
}
.drawer-navbar .drawer-menu li {
float: left;
}
.drawer-navbar .drawer-menu-item {
line-height: 3.75rem;
padding-top: 0;
padding-bottom: 0;
}
.drawer-navbar .drawer-hamburger {
display: none;
}
.drawer-navbar .drawer-nav {
position: relative;
left: 0;
overflow: visible;
width: auto;
height: 3.75rem;
padding-top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.drawer-navbar .drawer-menu {
padding: 0;
} .drawer-navbar .drawer-dropdown-menu {
position: absolute;
width: 16.25rem;
border: 1px solid #ddd;
}
.drawer-navbar .drawer-dropdown-menu-item {
padding-left: .75rem;
}
} .drawer-dropdown-menu {
display: none;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
.drawer-dropdown-menu > li {
width: 100%;
list-style: none;
}
.drawer-dropdown-menu-item {
line-height: 3.75rem;
display: block;
padding: 0;
padding-right: .75rem;
padding-left: 1.5rem;
text-decoration: none;
color: #222;
}
.drawer-dropdown-menu-item:hover {
text-decoration: underline;
color: #555;
background-color: transparent;
} .drawer-dropdown.open > .drawer-dropdown-menu {
display: block;
} .drawer-dropdown .drawer-caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 4px;
-webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
transition: opacity .2s ease, -webkit-transform .2s ease;
transition: transform .2s ease, opacity .2s ease;
transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
} .drawer-dropdown.open .drawer-caret {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}