/* Anna Kubota Portfolio website
font-family: "Hurricane", cursive;
font-family: var(--font-anton);
font-family: "Zen Maru Gothic", serif;
 ============================================*/

/************************* COMMON ****************************/
:root {
  --mv-color: #fcfb03;
  
  --font-anton: "Anton", sans-serif;
}
body {
  background-color: black;
  margin: 0 auto 0 auto;  
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}

/************************** HEADER ***************************/
.mv-heading2 {
  color: #fff;
  font-size: 48px;
  font-family: var(--font-anton);
}
.mv-heading1 {
  color: var(--mv-color);
  font-size: 72px;
  font-family: var(--font-anton);
}
.mv-img img {
  max-height: 400px;
  display: inline-block;
}
#header::after {
  display: inline-block;
  bottom: -12px;
  display: block;
  width: 90%;
  height: 3px;
  background: #fff;
  content: "";
  margin: auto;
}
.mv-text {
  display: flex;
  justify-content:space-around;
  align-items: center;
}

/***************************** MV *****************************/
.description {
  color: #fff;
  font-family: "Hurricane", cursive;
  font-size: 32px;
  text-align: center;  
}
.description::after {
  display: inline-block;
  display: block;
  width: 90%;
  height: 3px;
  background: #fff;
  content: "";
  margin: auto;
}
.flex-1 {
  display: flex;
  justify-content: space-around;
  margin: 48px auto;
}
.navi ul {
  font-family: var(--font-anton);
  color: white;
  font-size: 36px;
  list-style: none;
  text-align: center;
  margin-right: 128px;
}
.navi ul li {
  padding: 24px;
}
.navi a:link,
.navi a:visited,
.navi a:active {
  color: #fff;
}
.navi a:hover {
  color: #fcfb03;
}


/************************** SLIDESHOW TOP **********************/
.scroll-infinity {
  margin: 48px 0 48px 0;
}
#slideshow-1::before {
  display: block;
  width: 90%;
  height: 3px;
  background: #fff;
  content: "";
  margin: auto;
}
#slideshow-1::after {
  display: block;
  width: 90%;
  height: 3px;
  background: #fff;
  content: "";
  margin: auto;
}

@keyframes infinity-scroll-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--right {
  animation: infinity-scroll-right 40s infinite linear 0s both;
}
.scroll-infinity__item {
  width: calc(100vw / 5);
}
.scroll-infinity__item>img {
  width: 100%;
}

/******************** ABOUT **************************/
#about {
  width: 100%;
  margin: 48px auto;
  max-width: 1280px;
  background: url('../img/about.png') no-repeat right;
  background-size:cover;
  height: 100%;
  max-height: 600px;
}
.about-heading {
  font-family: "Hurricane", cursive;
  font-size: 128px;
  font-weight: 100;
  color: #24e00b;
  position: relative;
  top: -32px;
}
.flex-2 {
  display: flex;
  justify-content:center;
}
.list {
  color: #fff;
}
.about-content {
  position: relative;
  top: -48px;
  display: flex;
  align-items: center;
  gap: 12px 0;
  flex-wrap: wrap;
}
.about-content .skills-text {
  font-size: 104px;
}
.about-content dt {
  width: 20%;
  font-family: var(--font-anton);
  font-size: 32px;
  text-align:right;
}
.about-content dd {
  width: 80%;
  font-family: "Zen Maru Gothic", serif;
  align-items: center;
  padding-left: 24px;
}
.translate-text {
  margin-top: 12px;
}
#about::after {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  content: "";
  margin: auto;
}
.skills-content {
  display: flex;
  flex-flow:inherit;
  flex-wrap: wrap;
}
.skills-content dt {
  font-size: 18px;
  text-align: left;
  width: 8%;
}
.skills-content dd {
  width: 92%;
}
.skills-content .wordpress {
  font-size: 12px;
}

/******************** WORKS *************************/
#works {
  color: #fff;
}
.works-heading1 {
  font-family: "Hurricane", cursive;
  font-size: 128px; 
  font-weight: 100;
  text-align: center;
  color:var(--mv-color);
  border-bottom: 3px solid #fff;
  width: 88%;
  margin-left: auto;
  margin-right: auto;  
}

/***************** WORKSに動き ***********************/
/*========= 1文字ずつ出現させるためのCSS ===============*/
.works-heading1 span{opacity: 0;}
.works-heading1.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}
/****************** WORKSに動き はここまで*************/
#works img {
  border-radius: 10px;
}
.flex-3 {
  display: flex;
  justify-content: space-evenly;
  font-family: "Zen Maru Gothic", serif;
}
.flex-4 {
  display: flex;
  justify-content: center;
  font-family: "Zen Maru Gothic", serif;
}
.flex-4 a {
  margin: 48px 72px 48px 48px;
}
.web,
.graphic {
  margin-left: 12px;
  margin-right: 12px;
}
.photo-heading2,
.graphic-heading2,
.web-heading2 {
  font-family: var(--font-anton);
  font-size: 48px; 
}
.graphic-heading2,
.web-heading2 {
  margin: 48px 0 24px 48px;
}
.graphic-heading3,
.web-heading3 {
  margin: 24px 0 96px 48px;
}
.photo-heading2,
.photo-heading3 {
  margin-bottom: 24px;
}
.photo-heading2 {
  border-bottom: 3px solid #fff;
  width: 90%;
  margin-left: auto;
  margin-right: auto;  
}
#works::after {
  display: block;
  width: 90%;
  height: 3px;
  background: #fff;
  content: "";
  margin-left: auto;
  margin-right: auto;
}
.english {
  font-family: var(--font-anton);
}
.web img {
  max-height: 240px;
}


/******************* CONTACT *************************/
#contact {
  width: 100%;
  background: url('../img/contact-back.png') no-repeat right;
  background-size:cover;
  max-height: 720px;
  max-width: 1360px;
  margin-bottom: 72px;
}
.contact-heading {
  font-family: "Hurricane", cursive;
  font-size: 136px; 
  font-weight: 200;
  color: #fcfb03;
  margin: 48px 0 12px 72px;
}
/******************** CONTACTに動き ******************/
/*========= 1文字ずつ出現させるためのCSS ===============*/
.contact-heading span{opacity: 0;}
.contact-heading.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}
/*************** CONTACTに動きはここまで **************/

.contact-form {
  color: #fff;
  font-size: 18px;
  margin-left: 88px;
  font-family: "Zen Maru Gothic", serif;
}
.submit {
  color:black;
  background-color: aqua;
  display: inline-block;
  text-align: center;
  padding-left:32px;
  padding-right: 32px;
  padding-bottom: 4px;
  border-radius: 10px;
  font-size: 24px;
  margin-bottom: 0;
}
textarea {
  width: 90%;
  height: 200px;
  color: #fc03ed;
  padding: 0 24px;
	border-bottom: solid white;
}
.area-heading {
  display: flex;
	margin-top: 24px;
}
.label-heading {
  padding: 12px 0 12px 24px;
	color: #fc03ed;
	border-bottom: solid white;
}
.area-text {
	padding-left: 24px;
}
.wpcf7 form.sent .wpcf7-response-output {/* 送信ボタン下完了時 */
	border: none;
   color: black;
	font-size: 24px;
	background-color: yellow;
	padding: 8px;
	border-radius: 10px;
	margin-left: 48px;
	width: 50%;
	text-align: center;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {/* 送信ボタン下未入力警告 */
   border: none;
   color: black;
	font-size: 24px;
	background-color: red;
	padding: 8px;
	border-radius: 10px;
	margin-left: 48px;
	width: 50%;
	text-align: center;
}
.wpcf7-not-valid-tip {/* 必須未入力項目下の文章 */
    color: #f88;
    font-size: 12px;
	margin-bottom:12px;
}

/***************** SLIDESHOW KOTOBA *************/

.scroll-infinity__list--left {
  color: #fff;
  font-size: 32px;
  margin-bottom: 32px;
  font-weight: 600;
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(-100%);
  }
    to {
    transform: translateX(0);
  }
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 40s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 5);
}
.scroll-infinity__item {
  font-family: "Zen Maru Gothic", serif;
}
#slideshow-2::before {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  content: "";
  margin: auto;
}
#slideshow-2::after {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  content: "";
  margin: auto;
}

/*************************** FOOTER ***********************/
footer {
  color: darkorange;
  font-family: var(--font-anton);
  text-align: center;
}
.navi-footer ul {
  background-color: #0099d5;
}
.navi-footer ul li {
  color: #fff;
  display: inline-block;
  padding: 0 12px;
  font-size: 24px;
}
.navi-footer a:link,
.navi-footer a:visited,
.navi-footer a:active {
  color: #fff;
}
.navi-footer a:hover {
  color: #fcfb03;
}
.navi-footer {
  margin-bottom: 32px;
}
footer p {
  font-size: 18px;
  margin-bottom: 48px;
}


/**************************** PAGE WEB *****************************/
#page-web img {
  border-radius: 10px;
}
#page-web {
  background-color: black;
}
.breadcrumb li {
  display: inline-block;
  font-family: "Zen Maru Gothic", serif;
  font-size: 36px;
  margin: 24px 12px;
  color: #fff;
}
.breadcrumb {
  margin-left: 72px;
}
.breadcrumb .pink {
  color:#ff0084;
}
.breadcrumb .yellow {
  color: #fcfb03;
}
.breadcrumb .mark {
  color:#fff;
}
.breadcrumb li a:visited {
  color: #ff8d06;
}
.breadcrumb li a:link {
  color: #ff8d06;
}
.breadcrumb li a:hover {
  color:#0099d5;
}
.page-web-heading {
  font-family: "Hurricane", cursive;
  color: #fff;
  font-size: 72px;
  text-align: center;
  margin-bottom: 56px;
}
.flex-6 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.flex-6-img {
  max-width: 440px;
  margin-left: 72px;
  margin-bottom: 48px;
}
.flex-8 {
  display: flex;
}
.flex-8-img {
  max-width: 360px;
}
.flex-8-img:last-child {
  margin-left: 48px;
  margin-right: 72px;
}
.japanese {
  font-family: "Zen Maru Gothic", serif;
  font-size: 60px;
}
.flex-7-text {
  font-family: "Zen Maru Gothic", serif;
  color: #fff;
  padding-top: 24px;
}
.turquoise {
  color:#03a575;
}
.flex-7-text a {
  color: #fff;
}
.flex-7-text a:hover {
  color: #fcfb03;
}

/********************** GRAPHIC *******************/
/********************** PHOTO *********************/
/********************** PLACES ********************/
/********************** OBJECTS *******************/

#carousel-section {
  margin: 32px auto;
}
.carouselImgnone,
.carouselImgphoto,
.carouselImg {
  border-radius: 10px;
  margin: 0 6px;
  max-height: 440px;
}
.places-heading,
.people-heading,
.objects-heading {
  color: #fff;
  font-family: var(--font-anton);
  font-size: 48px;
  margin: 12px 56px;
}
.places-japanese,
.people-japanese,
.objects-japanese {
  font-family: "Zen Maru Gothic", serif;
}

/*====  SP ======*//*====  SP ======*//*====  SP ======*//*====  SP ======*//*====  SP ======*/
/*====  SP ======*//*====  SP ======*//*====  SP ======*//*====  SP ======*//*====  SP ======*/
/*====  SP ======*//*====  SP ======*//*====  SP ======*//*====  SP ======*//*====  SP ======*/

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

/* ************************  HEADER  ***************************/
#header {
  margin-top: 12px;
  margin-bottom: 4px;
}
.mv-heading1 {
  font-size: 24px;
}
.mv-heading2 {
  font-size: 24px;
}
/***************************** MV *****************************/
.flex-1 {
  margin: 12px;
}
.navi ul {
  font-size: 24px;
  margin: 0;
}
.navi ul li {
  padding: 8px;
}
#slideshow-1::before,
#slideshow-1::after,
.about-heading::after,
.web-heading2::after,
.description::after,
#header::after {
  width: 100%;
}
.description .heading-animation {
  font-size: 16px;
  margin-bottom: 4px;
}

/************************ SLIDESHOW TOP ***********************/
@keyframes infinity-scroll-right {
from {
  transform: translateX(0);
}
to {
  transform: translateX(-100%);
}
}
.scroll-infinity__item {
  width: calc(100vw / 3);
}
.scroll-infinity {
  margin: 12px 0;
}
/************************* ABOUT ***************************/
#about {
  margin: 48px auto 12px auto;
  background: url('../img/back.jpg') no-repeat right;
  max-height: 1560px;
}
.about-heading {
  font-size: 80px;
  color:var(--mv-color);
  padding: 48px 32px 12px 56px;
}
.about-content {
  flex-flow: column;
  align-items: center;
  gap: 2px 0;
}
.about-content dt:first-child {
  font-size: 32px;
}
.about-content dt {
  width: 100%;
  text-align:left;
  padding-left: 24px;;
}
.about-content dd {
  width: 100%;
  text-align: left;
  padding: 0 24px;
  font-size: 12px;
}
#about {
  position: relative;
  margin-bottom: 8px;
}
#about::before {
  position: absolute;
  height: 3px;
  width: 100%;
  content: "";
  background: #fff;
  display: inline-block;
}
.translate-text {
  margin-top: 0;
}
.skills-content {
  display: flex;
  flex-flow:inherit;
  flex-wrap: wrap;
}
.skills-content dt {
  font-size: 18px;
  text-align: left;
  padding: 0 0 4px 24px;
}
.skills-content dt:first-child {
  font-size: 18px;
}
.skills-content dd {
  font-size: 12px;
  padding: 0 0 8px 24px;
}
.skills-content .wordpress {
  font-size: 9px;
}
/******************** WORKS *************************/
.works-heading1 {
  font-size: 80px; 
  width: 100%;
}
.flex-3 {
  flex-flow: column;
  justify-content:center;
}
.flex-4 {
  flex-flow: column;
  justify-content: center;
}
.flex-4 a {
  margin: auto;
}
.web,
.graphic,
.flex-3 {
  margin: 0 32px;
}
.web {
  margin-top: 12px;
}
.photo-heading2,
.graphic-heading2,
.web-heading2 {
  font-size: 32px; 
}
.graphic-heading2,
.web-heading2,
.photo-heading2 {
  margin: 8px 0;
  text-align: center;
}
.graphic-heading3,
.web-heading3,
.photo-heading3,
.people-heading3,
.objects-heading3 {
  margin: 12px auto;
  text-align: center;
  font-size: 12px;
}
.photo-heading2 {
  border-bottom:none;
  width: 100%;
}
#works::after {
  width: 100%;
  margin-top: 12px;
}
.english {
  font-family: "Zen Maru Gothic", serif;
}
/******************* CONTACT *************************/
#contact {
  background: url('../img/contact-sp.jpg') no-repeat right;
  margin-bottom: 32px;
}
.contact-heading {
  font-family: "Hurricane", cursive;
  font-size: 72px; 
  margin: 24px;
}
.contact-form {
  margin: 0 24px;
}
.label-heading {
  position: relative;
  padding: 12px 0;
  display: flex;
  flex-flow: column; 
	width: 95%;
}
.submit {
  font-size: 24px;
}
textarea {
  width: 100%;
  height: 160px;
  margin: 12px 0;
}
.area-heading {
  display: flex;
  flex-flow: column;
	margin: 0;
}
.area-text {
	padding-left: 0;
}
	.wpcf7 form.sent .wpcf7-response-output {/* 送信ボタン下完了時 */
	font-size: 16px;
	padding: 8px;
	border-radius: 10px;
	margin-left: 0;
	width: 90%;
	text-align: center;
	margin-left: auto;
	margin-right:auto;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {/* 送信ボタン下未入力警告 */
	font-size: 16px;
	padding: 8px;
	border-radius: 10px;
	margin-left: auto;
	margin-right:auto;
	width: 90%;
	text-align: center;
}
.wpcf7-not-valid-tip {/* 必須未入力項目下の文章 */
    color: #f88;
    font-size: 12px;
}
/***************************** SLIDESHOW KOTOBA ******************/
.scroll-infinity__list--left {
  font-size: 16px;
  margin: 24px 0;
}
/************************** FOOTER *************************/
.navi-footer ul li {
  padding: 0 8px;
  font-size: 18px;
}
footer p {
  font-size: 14px;
  margin-bottom: 24px;
}
.navi-footer {
  margin-bottom: 12px;
}
/**************************** PAGE WEB *****************************/

.breadcrumb li {
  font-size: 16px;
  margin: 0;
  color: #fff;
}
.breadcrumb {
  margin: 12px 16px;
}
.page-web-heading {
  font-size: 22px;
  margin-bottom: 12px;
  padding: 0 24px;
}
.flex-6 {
  flex-direction: column;
}
.flex-6-img {
  margin: 0 12px;
  margin-bottom: 48px;
}
.japanese {
  font-size: 18px;
}
.flex-7-text {
  padding: 0 24px 24px 24px;
  font-size: 14px;
}
.flex-8 {
  display: none;
}
/********************** GRAPHIC *******************/
/********************** PHOTO *********************/
/********************** PLACES ********************/
/********************** OBJECTS *******************/

#carousel-section {
  margin-top: 0;
}
.carouselImg {
  margin: 12px 24px 0px 24px;
  min-width: 320px;
}
.carousel .carouselImgnone {
  display: none;
}
.carousel .carouselImgphoto,
.carousel .carouselImgphotowide {
  max-width: 320px;
  margin: 72px 24px;
  border-radius: 10px;
  max-height: 240px;
}
.carousel .carouselImgphotowide {
  margin-right: 72px;
  margin-left: 72px;
}
.english {
  font-family: "Zen Maru Gothic", serif;
}
}