@charset "UTF-8";

/* コンテンツブロック */

.wrap {
padding: 0 15px;
}

/* Hero-image - about siteページ */

.hero-image {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: inset 0 0 15px ivory;
margin: 0 auto;

background: -moz-radial-gradient(rgba(255,255,255,0) 40%, ivory 100%), url(images-common/sassari.jpg);
background: -webkit-radial-gradient(rgba(255,255,255,0) 40%, ivory 100%), url(images-common/sassari.jpg);
background: -ms-radial-gradient(rgba(255,255,255,0) 40%, ivory 100%), url(images-common/sassari.jpg);
background: radial-gradient(rgba(255,255,255,0) 40%, ivory 100%), url(images-common/sassari-custom.jpg);

background-size: cover;
background-repeat:no-repeat;
background-position: center;
max-width: 1000px;
text-align: center;
height: 315px;
position: relative;
}

.about-hero-message {
font-size: 14px;
font-size: 1.3rem;
font-weight: 500;
color: snow;
text-shadow: 0 0 3px #444444;
line-height: 1.9;
width: 100%;
position: absolute;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.giovanni {
color: snow;
font-weight: 300;
font-size: 12px;
font-size: 1.2rem;
text-align: center;
position: absolute;
bottom: 5%;
}


/* head 1 - about siteページ */

h1 {
padding: 0px 15px;
text-align: center;
margin-top: 45px;
margin-bottom: 15px;
font-size: 25px;
font-size: 2.5rem;
}

.clicchiQui-wrap {
text-align: center;
margin: 0 auto 35px;
}
.clicchiQui {
letter-spacing: 0.15em;
color: silver;
font-weight: 600;
font-size: 1.5rem;
line-height: 1;
}
.clicchiQui::before {
content: '> ';
}
.clicchiQui-wrap a:hover {
text-decoration: underline;
color: silver;
}


.slogan-box {
text-align: center;
line-height: 1;
margin: 0px auto 35px;
padding: 0 15px;
}
.slogan-box p {
font-size: 16px;
font-size: 1.6rem;
font-weight: 300;
color: darkred;
text-shadow: 0px 0px 2px silver;
letter-spacing: 0.07em;
}
.slogan-box p:first-child {
margin-bottom: 15px;
}

.head-text {
text-align: center;
width: 70%;
border-top: dotted 1px silver;
border-bottom: dotted 1px silver;
padding: 15px 3px;
margin: 0 auto 45px;
}
.head-text p {
color: grey;
font-weight: 300;
line-height: 1.8;
font-size: 1.4rem;
font-size: 1.4rem;
letter-spacing: 0.06em;
}
.head-text p:first-child {
margin-bottom: 10px;
}

.main-text-wrap {
padding: 0 15px;
margin-bottom: 45px;
}

.jp-box, #it-box {
margin-bottom: 45px;
}

.subtitle-box {
margin: 0 auto 25px;
padding: 15px 10px;;
background: -moz-radial-gradient(#EEE6D6 5%, ivory 100%);
background: -webkit-radial-gradient(#EEE6D6 5%, ivory 100%);
background: radial-gradient(#EEE6D6 5%, ivory 100%);
text-align: center;
}
.jp-box h2 {
color: #491a00;
font-size: 15px;
font-size: 1.5rem;
font-weight: 500;
text-shadow: none;
letter-spacing: 0.09em;
line-height: 1.7;
margin-bottom: 5px;
}
.subtitle-it {
color: darkgrey;
font-size: 13px;
font-size: 1.3rem;
line-height: 1.4;
letter-spacing: 0.06em;
margin-bottom: 0
}
 
#it-box h2 {
text-align: center;
font-size: 18px;
font-size: 1.8rem;
text-shadow: 0px 0px 2px silver;
font-weight: 400;
color: darkred;
margin: 45px auto 25px;
padding: 0 10px;
line-height: 1.8;
letter-spacing: 0.06em
}

.text-sec-wrap p:not(.subtitle-it) {
margin-bottom: 30px;
}

.motivi {
padding: 0 15px;
font-weight: 500;
margin-bottom: 30px;
}
.motivi p:not(:last-child) {
margin-bottom: 20px;
}

.a-chi-box {
padding: 30px;
background-color: lemonchiffon;
}
.a-chi-box h3 {
font-size: 15px;
font-size: 1.5rem;
font-weight: 600;
margin: 0 auto 15px;
color: #491a00;
text-shadow: 0 0 3px darkgrey;
text-align: center;
letter-spacing: 0.07em
}
.a-chi-box p {
letter-spacing: 0.02em;
}
.a-chi-box p:not(:last-child) {
margin-bottom: 10px;
}

a {
color: firebrick;
}
a:hover {
text-decoration: underline;
}

#footnote {
padding: 0px 20px;
margin: 35px auto 30px;
color: dimgray;
}
#footnote h3 {
font-size: 16px;
font-size: 1.6rem;
padding: 0 5px;
font-weight: 500;
}
#footnote p {
margin-top: 15px;
letter-spacing: 0.05em;
}


/* ===== width 560 以上 ===== */

@media (min-width: 560px) {

.hero-image {
height: 400px;
}

.wrap {
padding: 0px 45px;
}

.about-hero-message {
font-size: 15px;
font-size: 1.5rem;
}

.head-text {
width: 65%;
}

.a-chi-box {
text-align: center;
}

}


/* ===== width 960 以上 ===== */

@media (min-width: 960px) {

.about-hero-message {
font-size: 1.6rem;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.15rem;
}
.giovanni {
font-size: 13px;
font-size: 1.3rem;
font-weight: 300;
}

.head-text {
width: 510px;
}

.main-text-wrap {
margin: 0 auto;
width: 750px;
}

.a-chi-box {
padding: 30px 75px;
}

.motivi {
padding: 0 45px;
}


}

/* ===== width 320以下 ===== */

@media screen and (max-width: 320px) {

.hero-image {
height: 235px;
}

.about-hero-message {
font-size: 12px;
font-size: 1.2rem;
line-height: 1.6;
}

.giovanni {
font-size: 10px;
font-size: 1rem;
}


}