@import "compass"; @import "compass/reset/"; $red:#ba2636; $white:#fffffc; $yellow:#F7C114; $gray:#c0c0c0; $blue:#181b39; $water:#84b9cb; $black:#080000; .tal { text-align: left; } .tac { text-align: center; } .tar { text-align: right; } .clearfix:after { @include clearfix; } html, body { height: 100%; font-size: 62.5%; color: $black; background: $white; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } p { font-size: 1.4rem; line-height: 1.5em; text-align: justify; } a { text-decoration: none; &:link { color: $red; } &:hover { color: $yellow; } &:visited { color: $red; } &:active { color: $red; } } img { vertical-align: bottom; width: 100%; } /*------------------------------ HEADER ------------------------------*/ header { background-image: url(../img/header_bg.jpg); color: $white; height: 60%; width: 100%; h1 { margin: 0 auto; height: 100%; font-size: 1.2rem; text-align: center; position: relative; z-index: 1; img { height: 10%; width: auto; margin-top: 5px; } } .fl_l { width: 20%; height: 10%; position: absolute; left: 0; top: 0; display: block; background-image: url(../img/header_koi.png); background-repeat: no-repeat; background-position: left; background-size: contain; } .fl_r { width: 20%; height: 10%; position: absolute; right: 0; top: 0; display: block; background-image: url(../img/header_ryu.png); background-repeat: no-repeat; background-position: right; background-size: contain; } .cb-slideshow { position: absolute; width: 100%; height: 50%; top: 10%; left: 0; z-index: 0; &:after { content: ''; /*background: transparent url(dist/overlays/09.png) repeat top left;*/ } li { span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -moz-animation: imageAnimation 90s linear infinite 0s; -webkit-animation: imageAnimation 90s linear infinite 0s; animation: imageAnimation 90s linear infinite 0s; } div { z-index: 1000; position: absolute; bottom: 0px; left: 0px; text-align: center; opacity: 0; width: 100%; color: #FFFFFC; background-color: #FFFFFC; -moz-animation: titleAnimation 90s linear infinite 0s; -webkit-animation: titleAnimation 90s linear infinite 0s; animation: titleAnimation 90s linear infinite 0s; h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 1.6rem; padding: 0.5em 1em; line-height: 1.2em; text-align: left; text-shadow: 1px 1px 0 rgba(1, 1, 1, 0.9); b { color: #FFFFFC; background-color: #F7C114; padding: 2px 5px; } } } &:nth-child(1) span { background-image: url(../img/top/11.jpg); } &:nth-child(2) span { background-image: url(../img/top/01.jpg); -moz-animation-delay: 10s; -webkit-animation-delay: 10s; animation-delay: 10s; } &:nth-child(2) div { -moz-animation-delay: 10s; -webkit-animation-delay: 10s; animation-delay: 10s; } &:nth-child(3) span { background-image: url(../img/top/02.jpg); -moz-animation-delay: 20s; -webkit-animation-delay: 20s; animation-delay: 20s; } &:nth-child(3) div { -moz-animation-delay: 20s; -webkit-animation-delay: 20s; animation-delay: 20s; } &:nth-child(4) span { background-image: url(../img/top/03.jpg); -moz-animation-delay: 30s; -webkit-animation-delay: 30s; animation-delay: 30s; } &:nth-child(4) div { -moz-animation-delay: 30s; -webkit-animation-delay: 30s; animation-delay: 30s; } &:nth-child(5) span { background-image: url(../img/top/04.jpg); -moz-animation-delay: 40s; -webkit-animation-delay: 40s; animation-delay: 40s; } &:nth-child(5) div { -moz-animation-delay: 40s; -webkit-animation-delay: 40s; animation-delay: 40s; } &:nth-child(6) span { background-image: url(../img/top/05.jpg); -moz-animation-delay: 50s; -webkit-animation-delay: 50s; animation-delay: 50s; } &:nth-child(6) div { -moz-animation-delay: 50s; -webkit-animation-delay: 50s; animation-delay: 50s; } &:nth-child(7) span { background-image: url(../img/top/12.jpg); -moz-animation-delay: 60s; -webkit-animation-delay: 60s; animation-delay: 60s; } &:nth-child(7) div { -moz-animation-delay: 60s; -webkit-animation-delay: 60s; animation-delay: 60s; } &:nth-child(8) span { background-image: url(../img/top/14.jpg); -moz-animation-delay: 70s; -webkit-animation-delay: 70s; animation-delay: 70s; } &:nth-child(8) div { -moz-animation-delay: 70s; -webkit-animation-delay: 70s; animation-delay: 70s; } &:nth-child(9) span { background-image: url(../img/top/06.jpg); -moz-animation-delay: 80s; -webkit-animation-delay: 80s; animation-delay: 80s; } &:nth-child(9) div { -moz-animation-delay: 80s; -webkit-animation-delay: 80s; animation-delay: 80s; } } } .no-cssanimations { .cb-slideshow { li { span { opacity: 1; } } } } } @include keyframes(imageAnimation) { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } @include keyframes(titleAnimation) { 0% { opacity: 0; } 5% { opacity: 1; } 100% { opacity: 1; } } /*--------------------------------------- TICKER 流れるニュース ----------------------------------------*/ .ticker { width: 100%; text-align: left; background-color: #FFFFFC; position: relative; overflow: hidden; font-size: 1.2rem; padding: 1em 0; ul { width: 100%; position: relative; li { width: 100%; display: none; &:before { content: " "; } } } } /*--------------------------------------- MAIN ---------------------------------------*/ main { article { border-bottom: $gray solid 1px; border-top: $gray solid 1px; padding-bottom: 30px; h1 { font-size: 2.4rem; text-align: center; padding: 1.5em 0 0.5em; color: $blue; line-height: 0.9em; span { font-size: 0.6em; color: $gray; } } p { margin: 0 1em; padding-bottom: 1em; } } #sec1 { section { width: 50%; float: left; text-align: center; margin-bottom: 20px; h1 { font-size: 1.6rem; text-align: center; font-family: "MS ゴシック", "MS Gothic", "Osaka-等幅", Osaka-mono, monospace; font-weight: bold; padding: 0.5em 0; background-color: $water; color: $blue; width: 90%; margin: 0 auto 10px; } img { width: 90%; } p { margin: 0 5%; a { background-color: $yellow; color: $red; font-weight: bold; padding: 1px 2px; display: block; text-align: center; margin: 0.5em 0; &:hover { color: $red; } } } } } #sec2 { iframe { width: 100%; } p { padding: 0 0 0 1em; font-size: 1.4rem; margin: 0; small { display: block; text-align: right; font-size: 1.2rem; } } } #sec3 { section { h1 { font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 2rem; padding: 1em 0; margin-top: 1em; border-top: 1px dotted $gray; } } #gion1 { figure { margin-bottom: 2em; figcaption { margin-left: 1em; } } } #gion2 { table { width: 100%; font-size: 1.2rem; margin-bottom: 1em; strong { color: $red; font-weight: bold; } tbody { tr:nth-child(odd) { background: $gray; th { width: 4em; padding: 0.5em 1em; } td { padding: 0.5em 0; } } } tfoot { tr:nth-child(odd) { background: #FFFFFC; td { text-align: right; padding: 0.5em 0 1.5em; } } } } ul { font-size: 0; li { font-size: 1.4rem; width: 50%; display: inline-block; border-bottom: #FFFFFC 2px solid; } } } #gion3 { p { padding: 0 0 1em; } #least { min-width: 100%; width: 100%; padding: 0; margin: 0; position: relative; text-align: center; /* @group Fullimage */ /* @end */ /* @group Smallimages */ .least-preview { background-color: whitesmoke; border-bottom: 2px solid; border-color: #f1f0f0; padding: 0; margin-bottom: 20px; display: none; /* important for Slide-Down Effect */ img { width: 100%; max-width: 960px; /* default width: 960px - to edit go to assets/options */ margin: 0 auto; display: block; } .close { background-size: 100%; background-color: #FFFFFC; background-image: url("../img/close.svg"); opacity: 0.7; width: 2.4rem; height: 2.4rem; display: block; cursor: pointer; position: absolute; top: 2px; right: 2px; } article { max-width: 960px; margin: 0 auto; text-align: left; position: relative; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 1.5rem; line-height: 1.5em; font-weight: 400; strong { font-weight: 800; } } } .least-gallery { font-size: 0; li { position: relative; vertical-align: top; display: inline-block; margin: 0 1% 10px 1%; width: 48%; /* @end */ a { position: relative; display: block; text-decoration: none; width: 100%; /* Default width: 240px: to edit go to assets/options */ /* Default height: 150px: to edit go to assets/options */ /* @group Outline */ @include transition-property(outline-color); @includetransition-duration(0.3s); @includetransition-timing-function(ease-in-out); -webkit-backface-visibility: hidden; outline-color: white; /* @end */ img { width: 100%; /* Default width: 240px: to edit go to assets/options */ /* Default height: 150px: to edit go to assets/options */ } &.active { outline: 2px solid; outline-color: #666666; } &.load:after { content: url("../img/loading.svg"); position: absolute; top: 50%; left: 20px; right: 20px; z-index: 2; overflow: hidden; margin: -20px 0 0 0; text-align: center; text-transform: uppercase; letter-spacing: 1px; color: white; text-shadow: 1px 1px 1px #666666; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 1.5rem; line-height: 1em; font-weight: 800; } &:hover { /* @group Outline */ outline: 2px solid; outline-color: #666666; /* @end */ /* @group Thumbnail Text */ /* @end */ } &:hover:before { content: attr(data-subtitle); /* Default text: "View Picture" - to edit go change the attr. "data-subtitle" */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; letter-spacing: 1px; color: white; text-shadow: 1px 1px 1px #666666; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 175px; font-weight: 200; /* Default height: 150px: to edit go to assets/options */ background: black; background: rgba(0, 0, 0, 0.3); } &:hover:after { content: attr(title); /* Default text: your a "title"-tag */ position: absolute; top: 50%; left: 20px; right: 20px; z-index: 2; overflow: hidden; margin: -1em 0 0 0; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 1px #666666; letter-spacing: 1px; color: white; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 1.5rem; line-height: 1em; font-weight: 600; } } } } } } #gion4 { .accordion-menu { dt { background-color: #84B9CB; background-image: url(../img/sub1_bg.png); border-top: 1px solid #FFFFFC; a { display: block; position: relative; text-decoration: none; color: #FFFFFC; font-size: 1.6rem; padding: 1em 1em; &.is-open::after, &.is-close::after { position: absolute; top: 50%; right: 10px; margin-top: -0.5em; font-size: 1.6rem; font-family: FontAwesome; } &.is-open::after { content: "\f077"; } &.is-close::after { content: "\f078"; } } } dd { padding: 10px 0; background-color: $water; background-image: url(../img/sub1_bg.png); ul { width: 96%; font-size: 0; margin: 0 auto; li { display: inline-block; width: 25%; border-bottom: 2px solid #FFFFFC; img { width: 100%; height: auto; margin: 0; } } } } } } } #sec4 { .accordion-menu2 { dt { border-bottom: 1px solid #C0C0C0; background-color: #181B39; background-image: url(../img/header_bg.jpg); padding: 0.5em 0; text-align: center; letter-spacing: 1em; font-size: 2.4rem; a { display: block; position: relative; text-decoration: none; font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-weight: bold; color: #FFFFFC; &.is-open2::after, &.is-close2::after { position: absolute; top: 50%; right: 10px; margin-top: -0.5em; font-family: FontAwesome; } &.is-open2::after { content: "\f139"; } &.is-close2::after { content: "\f13a"; } } } dd { padding: 10px; table { display: block; width: 90%; margin: 0 auto; font-size: 1.4rem; thead { th { padding: 1em 0 0.5em; text-align: center; } } tfoot { td { padding: 1em 0 2em; text-align: right; } } tbody { th, td { padding: 0.5em; border: 1px solid $gray; img { width: 50%; } } } } } } } } /*--------------------------------- ASIDE ----------------------------------*/ aside { ul { font-size: 0; margin: 16px auto; width: 100%; max-width: 960px; li { display: inline-block; width: 50%; img { width: 100%; } } } } /*--------------------------------- FOOTER ----------------------------------*/ footer { background-color: #C0C0C0; div { width: 90%; max-width: 960px; margin: 0 auto; ul { padding: 2em 0 0; font-size: 1.2rem; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; margin: 1em 0; li { border-right: 1px solid #C0C0C0; padding: 0 0.5em; display: inline-block; a { &:link { color: $black; text-decoration: underline; } } } } p { font-size: 1rem; line-height: 1.5em; padding: 2em 0; background-image: url(../img/rakkan.png); background-repeat: no-repeat; background-position: center left; background-size: auto; small { padding-left: 6em; display: inline-block; } } } } /*----------------------------------------------- MENU サークルボタン ------------------------------------------------*/ .circle-nav { z-index: 100; text-align: center; position: fixed; bottom: 0; left: 50%; li { width: 0px; height: 0px; line-height: 0px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; bottom: 0; opacity: 0; -moz-transition: all 0.5s 0; -o-transition: all 0.5s 0; -webkit-transition: all 0.5s 0; transition: all 0.5s 0; display: inline-block; font-size: 0rem; font-weight: bold; background: #181B39; a { color: #BA2636; text-decoration: none; display: block; } } .open-circle { span { color: #FFFFFC; text-align: center; font-family: FontAwesome; font-size: 1.8rem; font-weight: bold; background: #181B39; width: 100px; height: 40px; line-height: 1em; display: block; position: relative; z-index: 10; opacity: 0.7; letter-spacing: 0.2em; margin-left: -50px; padding-top: 10px; -moz-border-radius: 100px 100px 0 0; -webkit-border-radius: 100px; border-radius: 100px 100px 0 0; } .plus:before { content: ""; } .mainas:before { content: ""; } } } .is-open li { opacity: 1; background-color: rgba(132, 185, 203, 0.8); width: 50px; height: 50px; line-height: 50px; font-size: 1.4rem; left: -25px; &li:nth-child(1) { -moz-transform: translate(-120px, 0px); -ms-transform: translate(-120px, 0px); -webkit-transform: translate(-120px, 0px); transform: translate(-120px, 0px); -moz-transition: all 0.5s 0; -o-transition: all 0.5s 0; -webkit-transition: all 0.5s 0; transition: all 0.5s 0; } &:nth-child(2) { -moz-transform: translate(-93px, -42px); -ms-transform: translate(-93px, -42px); -webkit-transform: translate(-93px, -42px); transform: translate(-93px, -42px); -moz-transition: all 0.7s 0; -o-transition: all 0.7s 0; -webkit-transition: all 0.7s 0; transition: all 0.7s 0; } &:nth-child(3) { -moz-transform: translate(-50px, -66px); -ms-transform: translate(-50px, -66px); -webkit-transform: translate(-50px, -66px); transform: translate(-50px, -66px); -moz-transition: all 0.9s 0; -o-transition: all 0.9s 0; -webkit-transition: all 0.9s 0; transition: all 0.9s 0; } &:nth-child(4) { -moz-transform: translate(0px, -75px); -ms-transform: translate(0px, -75px); -webkit-transform: translate(0px, -75px); transform: translate(0px, -75px); -moz-transition: all 1.1s 0; -o-transition: all 1.1s 0; -webkit-transition: all 1.1s 0; transition: all 1.1s 0; } &:nth-child(5) { -moz-transform: translate(50px, -66px); -ms-transform: translate(50px, -66px); -webkit-transform: translate(50px, -66px); transform: translate(50px, -66px); -moz-transition: all 1.3s 0; -o-transition: all 1.3s 0; -webkit-transition: all 1.3s 0; transition: all 1.3s 0; } &:nth-child(6) { -moz-transform: translate(93px, -42px); -ms-transform: translate(93px, -42px); -webkit-transform: translate(93px, -42px); transform: translate(93px, -42px); -moz-transition: all 1.5s 0; -o-transition: all 1.5s 0; -webkit-transition: all 1.5s 0; transition: all 1.5s 0; } &:nth-child(7) { -moz-transform: translate(120px, 0px); -ms-transform: translate(120px, 0px); -webkit-transform: translate(120px, 0px); transform: translate(120px, 0px); -moz-transition: all 1.7s 0; -o-transition: all 1.7s 0; -webkit-transition: all 1.7s 0; transition: all 1.7s 0; } } /*------------------------------------------ BREAKPOINT landscape ------------------------------------------*/ @media all and (orientation: landscape) { header { height: 100%; h1 { font-size: 1.4rem; } .cb-slideshow, .cb-slideshow:after { height: 100%; top: 0; } } .ticker { position: absolute; bottom: 0; font-size: 1.4rem; background-color: rgba(255, 255, 255, 0.7); } main { width: 90%; max-width: 960px; margin: 0 auto; #sec3 { #gion2 { ul { li { width: 33%; } } } } } .circle-nav { left: 100%; } /* line 610, ../sass/style-index.scss */ .is-open { li { &:nth-child(1) { -moz-transform: translate(-100px, 0px); -ms-transform: translate(-100px, 0px); -webkit-transform: translate(-100px, 0px); transform: translate(-100px, 0px); } &:nth-child(2) { -moz-transform: translate(-160px, -5px); -ms-transform: translate(-160px, -5px); -webkit-transform: translate(-160px, -5px); transform: translate(-160px, -5px); } &:nth-child(3) { -moz-transform: translate(-220px, -10px); -ms-transform: translate(-220px, -10px); -webkit-transform: translate(-220px, -10px); transform: translate(-220px, -10px); } &:nth-child(4) { -moz-transform: translate(-280px, -15px); -ms-transform: translate(-280px, -15px); -webkit-transform: translate(-280px, -15px); transform: translate(-280px, -15px); } &:nth-child(5) { -moz-transform: translate(-340px, -20px); -ms-transform: translate(-340px, -20px); -webkit-transform: translate(-340px, -20px); transform: translate(-340px, -20px); } &:nth-child(6) { -moz-transform: translate(-400px, -25px); -ms-transform: translate(-400px, -25px); -webkit-transform: translate(-400px, -25px); transform: translate(-400px, -25px); } &:nth-child(7) { -moz-transform: translate(-460px, -30px); -ms-transform: translate(-460px, -30px); -webkit-transform: translate(-460px, -30px); transform: translate(-460px, -30px); } } } aside { ul { width: 90%; li { display: inline-block; width: 33%; } } } } /*------------------------------------------ BREAKPOINT min-600 ------------------------------------------*/ @media all and (min-width: 600px) { header { h1 { font-size: 1.6rem; } } main { width: 90%; max-width: 960px; margin: 0 auto; #sec1 { section { width: 25%; float: left; text-align: center; margin-bottom: 20px; h1 { font-size: 1.6rem; } } } #sec2 { iframe { width: 65%; float: left; } p { width: 33%; float: right; padding: 0; } } #sec3 { #gion2 { ul { li { width: 33%; } } } #gion3 { #least { .least-gallery { li { width: 31%; } } } } } } .circle-nav { left: 100%; .open-circle { span { text-align: right; width: 70px; height: 40px; margin-left: -70px; padding-top: 30px; -moz-border-radius: 100% 0 0 0; -webkit-border-radius: 100%; border-radius: 100% 0 0 0; } } } .is-open { li { width: 70px; height: 70px; line-height: 70px; font-size: 1.6rem; left: -35px; &:nth-child(1) { @inclde transform(translate(-120px, -5px)); @include transition( all 0.5s 0); } &:nth-child(2) { @inclde transform(translate(-200px, -10px)); @inclde transition(all 0.7s 0); } &:nth-child(3) { @inclde transform(translate(-280px, -15px)); @inclde transition(all 0.9s 0); } &:nth-child(4) { @inclde transform(translate(-360px, -20px)); @inclde transition(all 1.1s 0); } &:nth-child(5) { @inclde transform(translate(-440px, -25px)); @inclde transition(all 1.3s 0); } &:nth-child(6) { @inclde transform(translate(-520px, -30px)); @inclde transition(all 1.5s 0); } :nth-child(7) { @inclde transform (translate(-600px, -35px)); @inclde transition(all 1.7s 0); } } } aside { ul { width: 90%; li { display: inline-block; width: 33%; } } } } /*------------------------------------------ BREAKPOINT min-800 ------------------------------------------*/ @media all and (min-width: 800px) { #sec3 { section { margin: 0 1%; float: left; } #gion1 { width: 48%; } #gion2 { width: 48%; } #gion3 { width: 48%; } #gion4 { width: 48%; } } } main #sec3 #gion5 figure { margin: 0 0.5% 2em; width: 49%; float: left; } /* line 64, ../sass/style-index2.scss */ main #sec3 #gion5 figure figcaption { margin-left: 1em; font-size: 1.4rem; padding-top: 0.5em; } /* line 67, ../sass/style-index2.scss */ main #sec3 #gion5 ul li { font-size: 1.4rem; padding-bottom: 1.5em; } /* line 68, ../sass/style-index2.scss */ main #sec3 #gion5 ul li b { font-weight: bold; font-family: "MS ゴシック", "MS Gothic", "Osaka-等幅", Osaka-mono, monospace; } /* line 70, ../sass/style-index2.scss */ main #sec3 #gion5 ul li:before { font-family: 'fontawesome'; content: ""; } /* line 74, ../sass/style-index2.scss */ main #sec3 #gion6 figure { margin-bottom: 2em; } /* line 75, ../sass/style-index2.scss */ main #sec3 #gion6 figure figcaption { margin-left: 1em; font-size: 1.4rem; padding-top: 0.5em; } /* line 79, ../sass/style-index2.scss */ main article details { border-bottom: #C0C0C0 1px dotted; margin: 0 0.5em 0.5em; padding-bottom: 0.5em; padding-left: 1em; color: #BA2636; font-size: 1.6rem; } /* line 87, ../sass/style-index2.scss */ main article summary { font-weight: bold; padding-bottom: 0.2em; margin-left: -1em; color: #181B39; font-size: 1.4rem; } @media all and (min-width: 600px) { main { width: 90%; max-width: 960px; margin: 0 auto; } main #sec3 #gion5 { width: 48%; } /* line 239, ../sass/style-index2.scss */ main #sec3 #gion6 { width: 48%; } }